第4章 - 0003 l-body-inner-0001のコードからポイントを読み取ろう

この節について

第4章では、全ページ共通で使用することを想定した雛形を作成してきました。

雛形の元となっているl-body-inner-0001のコードを読み返しながら、新しいポイントについて学んでいきましょう。

l-body-inner-0001を読み返しながら新しいポイントについて学ぼう

概要

  1. l-body-inner-xxxxの役割を理解する

1. l-body-inner-xxxxの役割を理解する

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などのクラスを作成して対応します。

この節の終わりに

この節では、l-body-inner-xxxxの役割について新たに学習しました。

次の第5章ではページの作り方を具体的に学んでいきましょう。

続きはこちら

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