CodeZine(コードジン)

特集ページ一覧

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

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

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

CSSで3カラムレイアウトを実現する

 3カラムレイアウトは、これまでの2カラムレイアウトの応用で実現することができます。基本的に使用するテクニックはこれまでと同じです。

フロート型:3カラムレイアウト

 まず、フロート型で、メイン(div#main)、サブ1(div#sub1)、サブ2(div#sub2)の3カラムレイアウトを実現する方法をみてみましょう。

 (X)HTMLのソースでは、メイン、サブ1、サブ2の順で出現します。

リスト17 (X)HTMLソース:フロート型:3カラムレイアウト/08.html
<div id="container">
  <div id="wrapper">
    <div id="main">メイン</div>
    <div id="sub1">サブ1</div>
  </div>
  <div id="sub2">サブ2</div>
</div>

 3カラムレイアウトをフロート型で実現する方法もさまざまですが、今回は次のようにします。

リスト18 CSSソース:フロート型:3カラムレイアウト/08.css
div#container {
  position: relative; /* 基準位置の座標(0 , 0)を提供
}
div#main {
  position: relative;
  width: 70%;
  top: 0;
  left: 20%;
  width: 60%;
  background-color: red;
}
div#sub1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  background-color: blue;
}
div#sub2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  float: right;
  background-color: blue;
}
div#footer {
  width: 100%;
  background-color: black;
  color: white;
}

 仕組みとしては、図14のように、メインを右フロート、サブ1を左フロートさせ、両者をラッパー(div#wrapper)で囲みます。さらに、ラッパーを左フロート、サブ2を右フロートさせ、全体をコンテナで囲みます。

図14 フロート型:3カラムレイアウトの模式図
図14 フロート型:3カラムレイアウトの模式図

ポジショニング型:3カラムレイアウト

 ポジショニング型で3カラムレイアウトを実現する方法もさまざまですが、今回は、メインコンテンツを相対配置、サブ1とサブ2を絶対配置で指定する方法を見てみましょう。

 (X)HTMLソースは、メイン、サブ1、サブ2をコンテナで囲んで記述します。

リスト19 (X)HTMLソース:ポジショニング型:3カラムレイアウト/09.html
<div id="container">
  <div id="main">メイン</div>
  <div id="sub1">サブ1</div>
  <div id="sub2">サブ2</div>
</div>

 CSSは、次のように指定します。今回は、サブ1とサブ2を絶対配置にします。この場合も、2カラム同様、絶対配置する内容が絶対配置しない内容の高さを超えた場合、フッターと重なって表示されるという点に注意してください。

リスト20 CSSソース:ポジショニング型:3カラムレイアウト/09.css
div#container {
  position: relative;  /* 基準位置の座標(0, 0)を提供 */
  width: 100%;
}
div#main {
  position: relative;  /* 座標(0, 20%)に相対配置 */
  width: 70%;
  top: 0;
  left: 20%;
  width: 60%;
}
div#sub1 {
  position: absolute;  /* 座標(0, 0)に絶対配置 */
  top: 0;
  left: 0;
  width: 20%;
}
div#sub2 {
  position: absolute;  /* 座標(0, 0)に絶対配置 */
  top: 0;
  right: 0;
  width: 20%;
}

 このCSSレイアウトのポイントは次のとおりです。

  • コンテナに「position: relative」を指定し、ポジショニングの基準位置(座標[0,0])を提供する。コンテナの幅として、ここでは「width: 100%」を指定しておく
  • メインコンテンツに「position: relative」を指定し、「top: 0」「left: 20%」を指定する。これにより、メインコンテンツが座標(0, 20%)に相対配置される。さらに「width: 60%」を指定しておく
  • サブコンテンツ1に「position: absolute」を指定し、「top: 0」および「left:0」を指定する。これによりサブコンテンツ1が座標(0, 0)に絶対配置される。幅は「width: 20%」とする
  • サブコンテンツ2に「position: absolute」を指定し、「top: 0」および「right: 100%」(あるいは「left: 80%」でも可)を指定する。これによりサブコンテンツ1が座標(0, 100%)に絶対配置される。幅は「width: 20%」とする

まとめ

 一般的によく見られるような比較的単純なレイアウトであれば、clearプロパティやclearfixを使用することで、フッタの重なりをコントロールすることができる分フロート型が向いています。横配置の得意なフロート型に対し、ポジショニング型は、縦配置が得意だと言えるでしょう。自分より後の要素も自由に配置をコントロールすることができますが、フッタの重なりには注意が必要です。

 今回紹介したフロート型、およびポジショニング型のレイアウトテクニックは、どちらも、(X)HTMLのソース上では、メインのコンテンツを先に記述し、サブコンテンツは後から記述することができます。CSSによるクロスブラウザな表示も大切ですが、まずは(X)HTMLの構造を考え、内容の重要なものから先に記述することが大切です。

 これにより、CSSが利用できない環境であっても、重要な内容を先に伝えることができ、SEO上でも有効なコンテンツとなるのです。これまでの連載で述べてきたように、見た目はCSSで後から自由に変更することができます。



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

バックナンバー

連載:クロスブラウザなレイアウトデザインテクニック

著者プロフィール

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

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

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

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

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5