【ホームページ作成】CSS段組2：スタイルシートで作る段組レイアウトの例

スタイルシートだけで作る段組の例

前回の記事「スタイルシートだけで段組を作る」で、table要素を使わずに段組（マルチカラム）を作る方法についてご紹介致しました。 今回は、段組を用いたページ構成をサンプルとして示して、その通りの段組を作る方法をご紹介致します。

今回ご紹介するのは、下記の画像のようなページ構成です。 よくある構成ですね。

この構成の段組をスタイルシートだけで実現するサンプルソースをご紹介致します。

まずはHTMLを書く

まずは、HTML部分をご紹介致します。 デザインはすべてスタイルシートで記述しますから、HTMLは非常に単純です。

<div class="blocka">
   ロゴ
</div>
<div class="blockb">
   案内・検索窓
</div>
<div class="blockc">
   ナビゲーション
</div>
<div class="blockd">
   メニュー
</div>
<div class="blocke">
   本文
</div>
<div class="blockf">
   著作権表示
</div>

※説明のためにスタイルシートのclass名を「blocka」「blockb」…としていますが、実際に使用する際には、「navi」や「menu」などのように分かりやすい名称を付ける方がよいでしょう。

たったこれだけです。上から順番に記述しているだけですね。 tableを駆使した場合と異なり、非常に分かりやすいソースになっています。
※実際には、デザインの関係上、複数のブロックを囲むようなブロック要素（divなど）を使わなければならない可能性もあります。 ここでは、話を簡単にするために、最もシンプルな記述方法でご紹介します。

スタイルシートで段組レイアウトにする

それでは、このHTMLに対してスタイルシートを適用して、冒頭の画像のようなレイアウトにしてみましょう。

スタイルシートの記述方法は 次のページで！ →