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

全体のソースと見え方の例

最後に、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>

■スタイルシート部分

<style type="text/css">
div.blocka {
   float: left;
   width: 200px;
}
div.blockc {
   clear: both;
}
div.blockd {
   float: left;
   width: 15%;
}
div.blockf {
   clear: both;
}
</style>

■表示例

範囲が分かりやすいように枠線を付加し、ブロックの高さを3文字分（3em）にしています。

おわり……ではなく...

今回は、スタイルシートで段組を作成する例をご紹介致しました。
基本的には、最初の記事「スタイルシートだけで段組を作る」でご紹介した方法の組み合わせで実現できることがお分かり頂けたと思います。

実は、今回ご紹介した方法だけでは、D段とE段の長さ（高さ）が異なる場合に、うまくいかない問題が起こる可能性があります。
その対策は、次の記事「隣の段が下に回り込むのを防ぐ」でご紹介していますので、こちらも合わせてご参照下さい。

その他のレイアウトについても、今後ご紹介していきたいと思います。
ぜひ、ご活用下さい。

【関連記事】

• スタイルシートだけで段組を作る
• スタイルシート段組のメリット
• ナビゲーションバーをスタイルシートで装飾
• 様々な線種を使った表を作りたい
• 初心者応援講座 スタイルシートを使う3つの方法