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

最後に、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)にしています。

(A)ロゴ
200px
(B)案内・検索窓
(C)ナビゲーション
(D)メニュー
15%
(E)本文
(F)著作権表示

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

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

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

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

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。