ベーシックストラクチャ
汎用的なdiv要素について解説します。
div.h1Group
<div class="h1Group">はh1とキャッチ・リード文章などをグループ化します。div.h1Groupに隣接するはずのdiv.sectionとのマージン管理のために、h1Groupクラスは下マージンを提供しています。
使用方法・効能
- グループ化する
- h1回りは変則的なレイアウトになりやすいので、cssをつけやすくする
div.h1Groupに入っている代表的なスタイル
- margin-bottom
div.section
xhtml2.0やhtml5で導入予定のsection要素を先取りする。見出しと文章などをセットにしてsectionで囲む。
使用方法・効能
- 文書の構造化ができ、何がどこにあるかが把握しやすい
- DOM操作がしやすくなる
- div.sectionにidを振れるので、スタイルの局所化ができ、オブジェクト指向っぽくいける（抽象クラスと派生クラス）
- マージン管理がしやすい
div.sectionに入っている代表的なスタイル
- clear: both
- margin-bottom