ホームページ作成/レイアウトの作成・調整 (HTML,CSS)

CSS段組2:スタイルシートで作る段組レイアウトの例(4ページ目)

HTML+CSSで「段組(マルチカラム)」を作ってみましょう。よくあるレイアウトのサンプルを用意して、その通りに段組を構成する方法をご紹介します。スタイルシートでスマートに段組を作りましょう。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

最後に、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段の長さ(高さ)が異なる場合に、うまくいかない問題が起こる可能性があります。
その対策は、次の記事「隣の段が下に回り込むのを防ぐ」でご紹介していますので、こちらも合わせてご参照下さい。

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

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます