SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

 マルチカラムレイアウトは、「positionプロパティ」を利用したポジショニング型でも実現することができます。ここでは、絶対配置と相対配置を組み合わせたレイアウト方法を紹介しましょう。

ポジショニング型:左サイドバーレイアウト

 まずは、フロート型と同じ左サイドバーレイアウトをポジショニング型で再現してみましょう。今回は、コンテナの左上を基準点(座標[0,0])としたいので、(X)HTMLのソースは、コンテナにヘッダを含める形式ではなく、ヘッダを独立させています。

リスト11 (X)HTMLソース:ポジショニング型:左サイドバーレイアウト/05.html
<div id="header">ヘッダ</div>
<div id="container">
  <div id="main">メイン</div>
  <div id="sub">サブ</div>
</div>
<div id="footer">フッタ</div>

 ここでは、サブコンテンツを絶対配置とし、メインコンテンツを相対配置して指定しますが、メインコンテンツを絶対配置の対象としてもかまいません。ただし、絶対配置した内容が絶対配置していない内容の高さを超える場合、図11のように、フッタと重なって表示されてしまう点に注意してください。

図11 フッタが重なって表示されている例
図11 フッタが重なって表示されている例

 CSSソースは次のようになります。

リスト12 CSSソース:ポジショニング型:左サイドバーレイアウト/05.css
div#container {
  width: 500px;
  position: relative; /* 基準点の座標(0, 0)を提供 */
}
div#sub {
  width: 200px;
  position: absolute; /* 座標(0,0)に絶対配置 */
  top: 0;
  left: 0;
}
div#main {
  width: 300px;
  position: relative; /* 座標(0, 200px)に相対配置 */
  top: 0;
  left:200px;
}

 ここでのポイントは次のとおりです。

  • コンテナに「position: relative」を指定し、ポジショニングの基準位置(座標[0,0])を提供する。コンテナの幅として、ここでは「width: 500px」を指定しておく
  • サブコンテンツの幅として、ここでは、「width: 200px」を指定する。さらに、「position: absolute」を指定し、「top: 0」および「left:0」を指定する。これによりサブコンテンツが座標(0,0)に絶対配置される
  • メインコンテンツに「position: relative」を指定し、「top: 0」「left: 200px(サブの「widthプロパティ」と同じ値)を指定する。これにより、メインコンテンツが座標(0, 200px)に相対配置される。メインの幅「width: 300px」を指定しておく

ポジショニング型:右サイドバーレイアウト

 右サイドバーのレイアウトも、左サイドバーと同様に指定するだけでOKです。

リスト13 CSSソース:ポジショニング型:右サイドバーレイアウト/06.html, 06.css
div#container {
  width: 500px;
  position: relative; /* 基準点の座標(0, 0)を提供 */
}
div#sub {
  width: 200px;
  position: absolute; /* 座標(0, 300px)に絶対配置 */
  top: 0;
  left: 300px;
}
div#main {
  width: 300px;
  position: relative; /* 座標(0, 0)に相対配置 */
  top: 0;
  left:0;
}

 ポイントは次のとおりです。

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

次のページ
フッタの重なりを考慮する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
クロスブラウザなレイアウトデザインテクニック連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4939 2010/03/17 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング