この節について
完成したblog-service-top.htmlのコードを元に、l-body-inner-xxxx、l-contents-type-xxxx、mod-container-xxxxについて、補足説明をしていこうと思います。
bodyタグからh2セクションの外郭(mod-container-xxxx)までの定型化について
完成したblog-service-top.htmlのHTML文書構造のツリーを簡略化すると以下のように表すことができます。
- body
- l-body-inner-0001
- mod-header-0001
- l-contents-type-0001
- mod-heading-0001（h1見出し）
- mod-container-0001
- mod-heading-0001（h2見出し）
- mod-media-0001
- mod-container-0001
- mod-heading-0001（h2見出し）
- mod-media-0002
- mod-container-0001
- mod-heading-0001（h2見出し）
- mod-media-0002
- mod-footer-0001
- l-body-inner-0001
「第4章 7節 レイアウトのクラスの総合的な特徴や役割について学ぼう」で「必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にして、h1セクションを作成する」ということについて説明しました。
「第3章 14節 mod-container-0001のコードからポイントを読み取ろう」で「h2のセクションの外郭を担うのがmod-container-xxxxの役割」であるということについて説明しました。
第4章と第3章で説明したこれらのことが、完成したblog-service-top.htmlのHTML文書のツリーにも当てはまることがわかります。
この「とてもやさしいCSS設計」では「常にbodyタグ、l-body-inner-xxxx、l-contents-type-xxxx、mod-container-xxxxの順に入れ子にして、その中にh2タグを設置する。」という風に、h2セクションの外郭までのクラス命名規則とページの構造を定型化して捉えられるように設計指針を定めることで、クラスの命名やブロックの分け方などに迷うことを減らし、本質的なスタイリングに集中できるようにしています。
mod-container-xxxxの中に設置する要素について
また、「第3章 14節 mod-container-0001のコードからポイントを読み取ろう」で一度説明したことの繰り返しになりますが、h2セクション内に設置する要素には特にクラス名のルールは設けていません。
あまり細部まで厳格なルールを設けると後から変更し難いコードになってしまう側面もあるため、厳格なルールを設けるのはh2セクションの外郭までに留めています。
第5章までに作成したblog-service-top.htmlでは、mod-container-0001の中にmod-media-0001やmod-media-0002が設置されて、それ以上モジュールが入れ子になることはありませんでしたが、実際のWebサイト制作ではmod-container-xxxxの中に色々なモジュールが多重に入れ子になる場合がほとんどだと思います。
その場合も特に難しいことはなく、mod-header-0001の中にmod-button-0001を入れ子にしたときと同じく、親モジュールのElementクラスで表示位置や幅を決め、その中に子モジュールを設置する。という方法を繰り返していくだけでコンテンツは上手く配置できると思います。
ページ作成手順のまとめ
実際にページを作成するときに、クラス命名規則などを手早く確認できるようにまとめておきます。
ページを作成する手順の概要
- bodyタグの中に、l-body-inner-0001を設置する
- l-body-inner-0001の中にmod-header-0001を設置する
- l-body-inner-0001の中にmod-footer-0001を設置する
- l-body-inner-0001の中にl-contents-type-0001を設置する
- l-contents-type-0001の中にh1タグとh1に属するコンテンツを設置する
- l-contents-type-0001の中にmod-container-0001を設置する
- mod-container-0001の中に適宜モジュールを入れ子にしていくとページが完成する
1. bodyタグの中に、l-body-inner-0001を設置する
bodyタグの中に最初に設置されるクラスが、l-body-inner-0001です。
bodyタグの中に最初に設置するレイアウトのクラスの命名規則はl-body-inner-xxxxとするように厳格に定めています。
そのElementクラスで、以下の3つの領域に分けます。
- ヘッダー領域
- コンテンツ領域
- フッター領域
デザインによっては4つ以上の領域に分けることもあります。
2. l-body-inner-0001の中にmod-header-0001を設置する
ヘッダー領域内にmod-header-0001を設置します。
3. l-body-inner-0001の中にmod-footer-0001を設置する
フッター領域内にmod-footer-0001を設置します。
4. l-body-inner-0001の中にl-contents-type-0001を設置する
コンテンツ領域内にl-contents-type-0001を設置します。
コンテンツ領域に設置するレイアウトのクラスの命名規則はl-contents-type-xxxxとするように厳格に定めています。
そのElementクラスで、以下のことをします。
- 水平線を引くようにして、いくつかの領域に分ける
- 領域ごとに幅を決めて、センタリングが必要な場合は
margin-right: 0;margin-left: 0;などを設定してセンタリングする - 領域内をカラム分けする場合はカラム分けをする
ここまでが、l-contents-type-xxxxの役割です。
5. l-contents-type-0001の中にh1タグとh1に属するコンテンツを設置する
さきほど分けた領域のうち、見出し領域にh1タグを設置します。
他にもh1セクションに属するコンテンツがある場合は設置し、h1セクションにあたる部分を完成させます。
6. l-contents-type-0001の中にmod-container-0001を設置する
さきほど分けた領域のうち、h2セクションにあたる領域にmod-container-0001を設置します。
h2セクションの外郭として使用する要素のクラス命名規則はmod-container-xxxxとするように厳格に定めています。
bodyタグ、l-body-inner-xxxx、l-contents-type-xxxx、mod-container-xxxx の順に入れ子にします。
bodyタグ、l-body-inner-xxxx、l-contents-type-xxxx までがh1セクション、mod-container-xxxxからはh2セクションとしてコーディングします。
7. mod-container-0001の中に適宜モジュールを入れ子にしていくとページが完成する
h2セクション内に適宜モジュールを入れ子にしていき、隣接兄弟要素セレクタやfirst-child、last-childなどで余白調整をしていくとページが完成します。
この節のおわりに
いよいよページの作成まで完了し、レイアウトのクラスについての説明を終えました。
「第3章 - まとめ」や「第4章 まとめ」に書いた項目について、ご自身にとって思い出しやすい表現に変えて、すぐに確認できる場所に書き出しておいてから、実際にコーディングをするときにそれらのポイントを確認しながらコーディングしていくと良いかもしれません。
最初のうちは思い出すのに苦労するかもしれませんが、継続していくうちにパターンが身についてあまり頭を使わなくても自然とできるようになってくると思います。
チュートリアルを最後まで終えたときに、まだ身についていないと感じた場合は、2章から何回か繰り返してみるのも良いと思います。
すぐにはできなくとも、焦らずに学習と実践を繰り返し行なってみてください。