この節について
l-contents-type-0001のコードを読み返しながら、新しいポイントについて学んでいきましょう。
l-contents-type-0001のコードを読み返しながら新しいポイントについて学ぼう
概要
l-contents-type-0001のコードを元に説明する新しいポイントとして以下のようなことが挙げられます。
- コンテンツ領域のBlockクラス名は必ずl-contents-type-から始まるクラス名にする
- l-contents-type-xxxxの役割を理解する
1. コンテンツ領域のBlockクラス名は必ずl-contents-type-から始まるクラス名にする
「とてもやさしいCSS設計」では、コンテンツ領域の外枠となるBlockクラス名は必ずl-contents-type-から始まるクラス名にすることを厳格に定めています。
コンテンツ領域のBlockクラス名のルールを厳格に定めることで、クラスの命名に迷うことを減らし、本質的なスタイル設定に集中できます。
例えば以下のようなBlockクラス名を付けることができます。
- l-contents-type-0001
- l-contents-type-example-name
l-contents-type-から始まるBlockクラス名であれば、後に続く文字列は数字でも複数の単語でも、任意の文字列で構いません。
Elementクラス名は、BEMの命名規則に則って任意の名前を付けてください。
前の節で作成したElementクラスを具体例として挙げると以下のようなものがありました。
- l-contents-type-0001__heading-wrapper
- l-contents-type-0001__body
l-contents-type-0001ではModifierクラスを定義しませんでしたが、BEMの命名規則に則ってModifierクラスを定義することもできます。
2. l-contents-type-xxxxの役割を理解する
l-contents-type-xxxxとしていますが、さきほど説明したようにxxxxの部分はどのような文字列でも構いません。
l-contents-type-xxxxはコンテンツ領域の外枠となるBlockクラスであり、以下の役割を担います。
4-1. l-body-inner-xxxxで分割したうちの、コンテンツ領域内に水平線を引くようにしてさらにいくつかの領域に分割する
4-2. 各領域をセンタリングするかしないか、センタリングする場合はセンタリングされる領域の幅を決定する
4-3. 各領域ごとにカラム数を決定する
4-4. 複数カラムの領域についてはカラムごとの幅を決定する
具体例を挙げると、l-contents-type-0001では以下のことを行っています。
- h1見出しを設置する領域とcontainerを設置する領域に分割
- h1見出しを設置する領域もcontainerを設置する領域も「1200pxの幅でセンタリング」
- h1見出しを設置する領域もcontainerを設置する領域も「1カラム」
- いずれも1カラムなのでセンタリングされた幅と等しい
デザインによっては、とても多くの水平線で領域を分割をすることになったり、領域ごとに異なる幅でセンタリングしたり、水平線で分割した領域内をカラム分けすることになったりと、非常に多くのことをl-contents-type-xxxxクラスで行うことになりますが、上述した4-1から4-4を一つずつ確認しながら落ち着いて進めていけば、簡単に分けられると思います。
この節のおわりに
この節では、l-contents-type-xxxxの命名規則や役割について新たに学習しました。
次の節では第4章のまとめをし、l-body-inner-xxxxとl-contents-type-xxxxを合わせて考えながら、新たなポイントについても学習していきましょう。