この節について
これまで、モジュールのクラスとレイアウトのクラスを作成してきましたが、接頭辞が違うことを除けば作り方は同じでした。
作り方は同じですが、この「とてもやさしいCSS設計」では、レイアウトのクラスの特徴や役割を明確に定義しモジュールと区別しています。
モジュールのクラスとレイアウトのクラスとの違いを明確に言語化して定義できていない場合、それらのカテゴリを分ける意味がなく、チームでの制作どころか、自分一人で行っている制作においてさえ、新しく定義するクラスをどちらのカテゴリに分類するべきなのかわからなくなって、ただ混乱を生む要因となってしまいます。
既にl-body-inner-0001とl-contents-type-0001のそれぞれの命名規則や役割については説明してきましたが、この節では、それら2つを合わせた場合、つまりレイアウトのクラスの特徴や役割について総合的に学習し、モジュールとレイアウトの違いを明確に言語化できるようにしていきましょう。
新しいポイントについて学ぼう
概要
この「とてもやさしいCSS設計」における、レイアウトのクラスの特徴や役割を以下に挙げた3つの項目に分けて学んでいきましょう。
- レイアウトのBlockクラス名はl-body-inner-から始まるものとl-contents-type-から始まるものだけとする
- 必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にしてページの外郭を構成する
- l-body-inner-xxxxのBlockクラス、l-contents-type-xxxxのBlockクラスは各ページでそれぞれ一度だけ必ず使用する
1. レイアウトのクラス名はl-body-inner-から始まるものとl-contents-type-から始まるものだけとする
レイアウトのクラス名は、l-body-inner-から始まるものとl-contents-type-から始まるものだけに限定しています。
これまで作成してきたものから具体例を挙げると以下のクラスがあります。
l-body-inner-0001と、そのElementクラスl-contents-type-0001と、そのElementクラス
2. 必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にしてページの外郭を構成する
必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にしてページの外郭を構成し、その中のどこかにh1タグを設置します。
つまり、l-body-inner-xxxxとl-contents-type-xxxxを合わせたものがh1セクションであり、第4章ではh1セクションまでを作成したことになります。
blog-service-top.htmlのソースコードを読み返すと、bodyタグ、l-body-inner-0001、l-contents-type-0001の順に入れ子になっていることがわかります。
3. l-body-inner-xxxxのBlockクラス、l-contents-type-xxxxのBlockクラスは各ページでそれぞれ一度だけ必ず使用する
l-body-inner-xxxxのBlockクラス、l-contents-type-xxxxのBlockクラスは各ページでそれぞれ一度だけ必ず使用するようにしてください。
一度だけというのは、あくまでもBlockクラスだけの話なので、Elementクラスは以下のように複数回使用されることがあります。
1 | 〜略〜 |
この節のおわりに
レイアウトのクラスについて、一言でその役割を表すと「ページの外枠」です。
別の言い方をすると「h1セクション」であるとも言えます。
ページの外枠を正確に作成することでページ全体の作成がとても楽になるので「レイアウトのクラスの特徴や役割」をしっかりと学習して、実践できるようにしていってください。