Webサイトを開発してみる（入門編）ー第4章2.3 ー

Bootstrap 5　フロントエンド開発の教科書

第4章 2.3 ③ tom-custom.css のソースコードと詳細

2.3 ③ tom-custom.css のソースコードと詳細　

解説）　【歯科クリニックのWebサイト】の各ページの装飾は、Bootstrap5を基本としますが、補足或いは追加機能を付与するためにオリジナルCSSプログラムも準備します。

以下が今回のオリジナルCSS プログラム「tom-custom.css」のプログラムソースです。

/*
Tom Custome CSS
*/
html {
    font-size: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    margin: 0;
}

.alignleft {
    float: left;
    margin-left: 0;
    margin-right: 1em;
}

.alignright {
    float: right;
    margin-left: 1em;
    margin-right: 0;
}

.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    margin-left: -5px;
    margin-right: -5px;
    max-width: 992px;
}

.alignwide {
    margin-left: -10px;
    margin-right: -10px;
    max-width: 720px;
}

.wp-block-categories.aligncenter,
.wp-block-latest-posts.aligncenter,
.wp-block-archives.aligncenter,
.wp-block-tag-cloud.aligncenter,
.wp-block-latest-comments.aligncenter,
.wp-block-rss.aligncenter {
    text-align: center;
}

figure {
    margin-left: 0;
    margin-right: 0;
}

body {
    box-sizing: border-box;
}

body *,
body *::before,
body *::after {
    box-sizing: inherit;
}

body {
    font-family: "Noto Sans JP", "Roboto", sans-serif, Arial;
    line-height: 1.8;
}

:root {
    --f1: 2.44em;
    --f2: 1.95em;
    --f3: 1.56em;
    --f4: 1.25em;
    --f5: 1em;
    --f6: 0.8em;
}

h1 {
    */ font-size: var(--f1);
}

h2 {
    font-size: var(--f2);
}

h3 {
    font-size: var(--f3);
}

h4 {
    font-size: var(--f4);
}

h5 {
    font-size: var(--f5);
}

h6 {
    font-size: var(--f6);
}

.tom-menu {
    margin: auto;
    font-size: 1.15rem;
    list-style: none;
}

.tom-menu a {
    color: rgb(2, 10, 32);
    text-decoration: none;
}

.tom-menu a:hover {
    padding: 1px;
    color: rgb(2, 10, 32);
    background-color: rgb(131, 215, 236);
}

4/6：
html {
font-size: 100%;
}
html { font-size: 100%; }：
標準フォントサイズを100%で設定します。（ブラウザによるが16pxを想定）

8/11：
img {
max-width: 100%;
height: auto;
}
img { max-width: 100%; height: auto; }：
画像の幅と高さの標準設定をします。

13/15：
body {
margin: 0;
}
body { margin: 0; }：
ブラウザが独自に持っているマージンをクリアします。

17/32：
.alignleft {
float: left;
margin-left: 0;
margin-right: 1em;
}
.alignright {
float: right;
margin-left: 1em;
margin-right: 0;
}
.aligncenter {
margin-left: auto;
margin-right: auto;
}
.alignleft { float: left; margin-left: 0; margin-right: 1em; }
.alignright { float: right; margin-left: 1em; margin-right: 0; }：
ギャラリーやテーブルなどのブロックの左寄せ・右寄せ設定に対応します。
.aligncenter { margin-left: auto; margin-right: auto; }：
上記と同様に中央揃え設定に対応します。

34/44：
.alignfull {
margin-left: -5px;
margin-right: -5px;
max-width: 992px;
}
.alignwide {
margin-left: -10px;
margin-right: -10px;
max-width: 720px;
}
.alignfull { margin-left: -5px; margin-right: -5px; max-width: 992px; }
.alignwide { margin-left: -10px; margin-right: -10px; max-width: 720px; }：
functions.phpにて「66 add_theme_support(‘align-wide’)」と設定しているため、「全幅」と「幅広」の機能が追加されます。それに対応するCSSを準備しておきます。

46/53：
.wp-block-categories.aligncenter,
.wp-block-latest-posts.aligncenter,
.wp-block-archives.aligncenter,
.wp-block-tag-cloud.aligncenter,
.wp-block-latest-comments.aligncenter,
.wp-block-rss.aligncenter {
text-align: center;
}
.wp-block-categories.aligncenter,
.wp-block-latest-posts.aligncenter,
.wp-block-archives.aligncenter,
.wp-block-tag-cloud.aligncenter,
.wp-block-latest-comments.aligncenter,
.wp-block-rss.aligncenter { text-align: center; }：
ウィジェット系のブロック設定（カテゴリー、最新の投稿、アーカイブ、タグクラウド、最新のコメント、RSS）の中央揃えに対応します。

55/58：
figure {
margin-left: 0;
margin-right: 0;
}
figure { margin-left: 0; margin-right: 0; }：
画像や音声など左右の余白が挿入されるブロックがあるため余白を削除します。

60/68：
body {
box-sizing: border-box;
}
body *,
body *::before,
body *::after {
box-sizing: inherit;
}
body { box-sizing: border-box; }
body *, body *::before, body *::after { box-sizing: inherit; }：
ギャラリーブロック設定の際、画像に追加するキャプションの黒色グラデーションをブロックエディターと同様に表示させます。

70/73：
body {
font-family: “Noto Sans JP”, “Roboto”, sans-serif, Arial;
line-height: 1.8;
}
body { font-family: “Noto Sans JP”, “Roboto”, sans-serif, Arial; line-height: 1.8; }：
フロント画面の表示用フォントを指定します。ここでは日本語用にNoto Sans JPとsans-serif、欧文用にRobotoとArialを使用します。またテキストの行の高さは1.8とします。

75/82：
:root {
–f1: 2.44em;
–f2: 1.95em;
–f3: 1.56em;
–f4: 1.25em;
–f5: 1em;
–f6: 0.8em;
}
:root { –f1: 2.44em; –f2: 1.95em; –f3: 1.56em; –f4: 1.25em; –f5: 1em; –f6: 0.8em; }：
フォントサイズを比率で指定するために変数を定義します。

84/106：
h1 {
font-size: var(–f1);
}
h2 {
font-size: var(–f2);
}
h3 {
font-size: var(–f3);
}
h4 {
font-size: var(–f4);
}
h5 {
font-size: var(–f5);
}
h6 {
font-size: var(–f6);
}
h1 { font-size: var(–f1); }
h2 { font-size: var(–f2); }
h3 { font-size: var(–f3); }
h4 { font-size: var(–f4); }
h5 { font-size: var(–f5); }
h6 { font-size: var(–f6); }：
見出しのフォントサイズh1～h6に上記で定義した変数を設定します。

108/123：
.tom-menu {
margin: auto;
font-size: 1.15rem;
list-style: none;
}
.tom-menu a {
color: rgb(2, 10, 32);
text-decoration: none;
}
.tom-menu a:hover {
padding: 1px;
color: rgb(2, 10, 32);
background-color: rgb(131, 215, 236);
}
.tom-menu { margin: auto; font-size: 1.15rem; list-style: none; }
.tom-menu a { color: rgb(2, 10, 32); text-decoration: none; }
.tom-menu a:hover { padding: 1px; color: rgb(2, 10, 32); background-color: rgb(131, 215, 236); }：
header.phpにてナビゲーションメニューをカスタマイズして表示する際に使用するオリジナルCSSの設定コードです。（※第4章1.3参照）

参考） オリジナルテーマ「Tom Works Dental」の CSS プログラムは以下の4プログラム( Bootstrap5 の CSS ファイル２種、自作の CSS プログラム2種）になります。

①bootstrap.css
Bootstrap5 の公式サイトからダウンロードします。実際に使用するのは ② bootstrap.min.css ですが、後で確認などチェックができるように ① bootstrap.css を用意します。

②bootstrap.min.css
Bootstrap5 の公式サイトからダウンロードします。こちらが実際に使用されます。

③tom-custom.css
【歯科クリニックのWebサイト】の各ページの装飾は、Bootstrap5を基本としますが、補足或いは追加機能を付与するためにオリジナルCSSプログラムも準備します。

④tom-editor.css
【歯科クリニックのWebサイト】の WordPress 内にて記事作成の際、ブロックエディター機能を記載するオリジナルCSSプログラムを準備します。

WordPressオリジナルテーマ制作入門