Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

CSSでマルチカラムレイアウト

クロスブラウザなレイアウトデザインテクニック 第7回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/03/17 14:00

 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト(段組レイアウト)を実現する方法を紹介します。

目次

はじめに

 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。

 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト(段組レイアウト)を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。

対象読者

  • XHTMLとCSSの基本を理解している方。
  • Web標準サイトの実践的な作り方に興味のある方。

必要な環境

 (X)HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は必要ありませんが、CSSをよくサポートした最新版のブラウザがあれば望ましいです。

フロート型の2カラムレイアウト

 フロートによるレイアウトは、現在主要のブラウザであれば、まず問題なく表示され、仕組みも非常にシンプルなため、クロスブラウザなデザインを目指すうえで比較的導入しやすいレイアウト方法だと言えるでしょう。

フロート型レイアウトのポイント

 フロート型のレイアウトは、メインコンテンツ(div#main)とサブコンテンツ(div#sub)の双方にfloatプロパティを指定し、全体をコンテナ(div#container)で囲むことで実現します。

リスト1 (X)HTMLソース:メインが先、サブを後に記述し、全体をコンテナで囲む
<div id="container">
  <div id="main">メイン</div>
  <div id="sub">サブ</div>
</div>

 フロート型レイアウトのポイントは、widthプロパティで、それぞれの領域の幅を指定することです。CSSの書式上、floatプロパティを適用する要素は、画像などの内在寸法を備えるもの以外widthプロパティで幅を指定する必要があります。従って、メインコンテンツ、サブコンテンツは、widthプロパティで幅を指定し、安定した表示を確保するようにしましょう。

 さらに、全体を囲むコンテナの幅を指定しておくことで、ウィンドウサイズを変更した際に起こりがちなカラム落ち(メインコンテンツやサブコンテンツのどちらか一方が下にずれ落ちること)を防ぐことができます。

 それでは実際にフロート型レイアウトの具体例をみていくことにしましょう。

フロート型:左サイドバーレイアウト

 左サイドバーのレイアウトは、図1のように、メインコンテンツ(div#main)を右に、サブコンテンツ(div#sub)を左にフロートさせることで実現することができます。

図1 フロート型:左サイドバーレイアウト(メイン右、サブ左)
図1 フロート型:左サイドバーレイアウト(メイン右、サブ左)

 CSSコードは、次のようになります。

リスト2 左サイドバーレイアウト:メイン右フロート、サブ左フロート
div#container {
  width: 100%; /* 全体の幅を指定 */
}
div#main {
  width: 70%; /* メインコンテンツの幅を指定 */
  float: right; /* 右にフロート */
}
div#sub {
  width: 30%; /* サブコンテンツの幅を指定 */
  float: left; /* 左にフロート */
}

フロート型:右サイドバーレイアウト

 さきほどの左サイドバーとは逆の方向にフロートさせると、右サイドバーのレイアウトになります。図2のように、メインコンテンツ(div#main)を左に、サブコンテンツ(div#sub)を右にフロートさせます。

図2 フロート型:右サイドバーレイアウト
図2 フロート型:右サイドバーレイアウト

 CSSコードは、次のようになります。

リスト3 右サイドバーレイアウト:メイン左フロート、サブ右(または左)フロート
div#container {
  width: 100%; /* 全体の幅を指定 */
}
div#main {
  width: 70%; /* メインコンテンツの幅を指定 */
  float: left; /* 左にフロート */
}
div#sub {
  width: 30%; /* サブコンテンツの幅を指定 */
  float: right; /* 右にフロート */
}

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

バックナンバー

連載:クロスブラウザなレイアウトデザインテクニック
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5