第5章 - 0004 レイアウトのクラスの特徴や役割について学ぼう

この節について

これまでモジュールのクラスとレイアウトのクラスを作成してきましたが、接頭辞が違うこと以外は作り方に違いはありませんでした。

作り方には違いがありませんが、この「とてもやさしいCSS設計」ではレイアウトのクラスの特徴や役割を明確に定義しています。

モジュールのクラスとレイアウトのクラスとの違いを明確に言語化して定義できていない場合、カテゴリを分ける意味がなく、チームでの制作どころか、自分一人で行っている制作においてさえ、新しく定義するクラス
をレイアウトとモジュールのどちらのカテゴリに分類するべきなのかわからなくなってしまいます。

そのようなことが無いように、この節では、blog-service-top.htmlで作成したソースコードを適宜読み返しながら、レイアウトのクラスの特徴や役割についてしっかりと学んでいきましょう。

レイアウトのクラスの特徴や役割

概要

この「とてもやさしいCSS設計」における、レイアウトのクラスの特徴や役割を以下に挙げた4つの項目に分けて学んでいきましょう。

  1. レイアウトのBlockクラス名はl-body-inner-から始まるものとl-contents-type-から始まるものだけとする
  2. 必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にしてページの外郭を構成する
  3. l-body-inner-xxxxクラスの役割を理解する
  4. l-contents-type-xxxxクラスの役割を理解する

1. レイアウトのクラス名はl-body-inner-から始まるものとl-contents-type-から始まるものだけとする

レイアウトのクラス名は、l-body-inner-から始まるものとl-contents-type-から始まるものだけに限定しています。

これまで作成してきたものから具体例を挙げると以下のクラスがあります。

  • l-body-inner-0001と、そのElementクラス
  • l-contents-type-0001と、そのElementクラス

l-body-inner-0001l-contents-type-0001ではModifierクラスを定義しませんでしたが、BEMの命名規則に則ってModifierクラスを定義することもできます。

また、このチュートリアルにおいては、l-body-inner-0001l-contents-type-0001といった数字を含んだクラス名をつけていますが、l-body-inner-example-namel-contents-type-example-nameなど、l-body-inner-から始まるものとl-contents-type-から始まるものであれば、あとに続く名前は自由に考えてください。

2. 必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にしてページの外郭を構成する

必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にしてページの外郭を構成し、その中のどこかにh1タグを設置します。

blog-service-top.htmlのソースコードを読み返すと、bodyタグ、l-body-inner-0001、l-contents-type-0001の順に入れ子になっていることがわかります。

また、この入れ子の構造から、l-body-inner-xxxxのBlockクラス、l-contents-type-xxxxのBlockクラスは各ページでそれぞれ一度だけ必ず使用するということもわかります。

一度だけというのは、あくまでもBlockクラスだけの話なので、Elementクラスは以下のように複数回使用されることがあります。

1
2
3
4
5
6
7
8
9
10
〜略〜
<div class="l-contents-type-xxxx">
<div class="l-contents-type-xxxx__element">
コンテンツ
</div>
<div class="l-contents-type-xxxx__element">
コンテンツ
</div>
</div>
〜略〜

3. l-body-inner-xxxxクラスの役割を理解する

第4章 - 0003 l-body-inner-0001のコードからポイントを読み取ろう」で学んだ内容の繰り返しになりますが、以下のことを復習をしていきましょう。

l-body-inner-xxxxはbodyタグの中に最初に設置するBlockクラスであり、ページに水平線を引くようにして、以下の3つの領域に分割する役割を担います。

  • ヘッダー領域
  • コンテンツ領域
  • フッター領域

ヘッダー領域とフッター領域には、モジュールを入れ子にしたときと同じく、予め作成しておいたmod-header-0001とmod-footer-0001をElementクラスの中に設置しました。

デザインによっては4つ以上の領域に分けることもあるとは思いますが、template.htmlが全ページ共通で使用する雛形であるということを考えると、基本的には上述した3つの領域に分ける程度で良いと思います。

多くの場合、l-body-inner-0001だけで足りると思いますが、全く違う構造のデザインに対応する必要が出てきた場合にはl-body-inner-0002やl-body-inner-0003などのクラスを作成して対応します。

4. l-contents-type-xxxxクラスの役割を理解する

l-contents-type-xxxxクラスは以下の役割を担います。

4-1. l-body-inner-xxxxで分割したうちのコンテンツ領域をさらにいくつかの領域に分割する
4-2. センタリングするかしないか、センタリングする場合はセンタリングされる領域の幅を決定する
4-3. カラム数を決定する
4-4. 複数カラムの場合はカラムごとの幅を決定する

これまで作成してきたものから具体例を挙げると、l-contents-type-0001では以下のことを行っています。

  • h1見出しを設置する領域とcontainerを設置する領域に分割
  • 1200pxの幅でセンタリング
  • 1カラム
  • 1カラムなのでセンタリングされた幅と等しい

デザインによってはとても多くのことをl-contents-type-xxxxとそのElementクラスで行うことになりますので、慣れるまでは少し難しいかもしれません。

この節の「2. 必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にしてページの外郭を構成する」で学んだ通り、l-body-inner-xxxxとl-contents-type-xxxxによってh1セクションを構成し、「第3章 - 0014 mod-container-0001のコードからポイントを読み取ろう」で学んだ通り、mod-container-xxxxは「h2のセクションの外郭を担う」という役割があります。

これらの情報を整理して、これまで作成してきたものから具体例を挙げると以下のようになります。

  • l-body-inner-0001とl-contents-type-0001でh1セクションを作る
  • mod-container-0001からはh2セクション

blog-service-top.htmlを読み返していただくと、そのことがわかると思います。

この節のおわりに

この節で説明した項目は非常に重要なポイントなので、「レイアウトのクラスの特徴や役割」をしっかりと覚えてください。

次の節では、mod-container-0001の中にmediaモジュールを設置して、ページを完成させましょう。

続きはこちら

とてもやさしいCSS設計チュートリアルの目次へ戻る