第5章 まとめ

この節について

この節では第5章までにやってきたことを振り返り、要点をまとめます。

第3章までに学習したポイントを振り返ろう

第3章までに学習してきたことは、「第3章 - まとめ」で一度振り返りをしていますが、忘れている方は一度読み返してみると良いと思います。

第4章と第5章で学習したポイントを振り返ろう

概要

第4章と第5章では、主にレイアウトのクラスの特徴や役割について学習してきました。

詳細については「第5章 - 0004 レイアウトのクラスの特徴や役割について学ぼう」で、以下の4つの項目に分けて記載していますが、以下の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クラスの役割を理解する

このあとは、前の節で完成したblog-service-top.htmlをもとに、l-body-inner-xxxx、l-contents-type-xxxx、mod-container-xxxxについて、補足説明をしていこうと思います。

h1セクションを構成する要素について

完成したblog-service-top.htmlの文書構造のうち、h1セクションにあたるところまでをbodyタグとBlockクラスだけで簡略化して表現すると以下のようになります。メインコンテンツ部分の入れ子の構造に焦点をあてているため、headerとfooterは省略しています。

  • body
    • l-body-inner-0001
      • l-contents-type-0001
        • mod-heading-0001(h1)

このチュートリアルで作成したblog-service-top.htmlでは、h1タグは l-contents-type-0001 の子モジュールとして設置していますが、 l-body-inner-0001 の子要素として設置しても大丈夫です。

常にbody、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にして、その中のどこかにh1を設置する。とパターン化して捉えることで、クラスの命名やブロックの分け方などに迷うことを減らし、本質的なスタイリングに集中できるようにしています。

h2セクションを構成する要素について

上記した文書構造にh2セクションである mod-container-0001 を追加すると以下のような構造になります。

  • body
    • l-body-inner-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

常にbody、l-body-inner-xxxx、l-contents-type-xxxx、mod-container-xxxxの順に入れ子にして、その中にh2タグを設置する。という風にbodyからここまではパターン化して捉えるように設計しています。
デザインによっては mod-container-xxxx の中のh2タグが省略される場合もありますが、基本的な考えとして理解していただければと思います。

また、「第3章 - 0014 mod-container-0001のコードからポイントを読み取ろう」で一度説明したことの繰り返しになりますが、h3セクションの外郭を表現するうえでは特にクラス名のルールは設けていません。
あまり細部まで厳格なルールを設けると後から変更し難いコードになってしまう側面もあるため、厳格なルールを設けるのはh2セクションの外郭までに留めています。

mod-container-xxxxの中について

blog-service-top.htmlでは、mod-container-0001の中にmod-media-0001やmod-media-0002が設置されて、それ以上モジュールが入れ子になることはありませんでしたが、mod-container-xxxxの中はデザインによっては色々なモジュールが多重に入れ子になります。

その場合も特に難しいことはなく、mod-header-0001の中にmod-button-0001を入れ子にしたときと同じく、親モジュールのElementクラスで表示位置や幅を決め、その中に子モジュールを設置する。という方法を繰り返していくだけでコンテンツは上手く配置できると思います。

この節の終わりに

いよいよページの作成まで完了し、レイアウトのクラスについて説明し終えました。

第3章 - まとめ」や「第5章 - 0004 レイアウトのクラスの特徴や役割について学ぼう」に書いた項目について、ご自身にとって思い出しやすい表現に変えて、すぐに確認できる場所に書き出しておいてから、実際にコーディングをするときにそれらのルールを当てはめていくと良いかもしれません。

最初のうちは思い出すのに苦労するかもしれませんが、継続していくうちにパターンが身についてあまり頭を使わなくても自然とできるようになってくると思います。

チュートリアルを最後まで終えたときに、まだ身についていないと感じた場合は、2章から何回か繰り返してみるのも良いと思います。

すぐにはできなくとも、ぜひ気長に学習と実践を行なってみてください。

続きはこちら

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