2カラム固定幅のCSSサンプルソース|上級CSSレイアウト講座

Loading

スポンサードリンク

ここでご紹介するレイアウト/段組は「floatで段組する固定幅」ですが、いつでも「可変幅|リッキドレイアウト」へ移行しやすいような段組になっています。

勿論、横幅指定は自由に変更可能で、スタイルシートの指定変更で左右のサイドバーを入れ替える事も自在です。

可変幅|リッキドレイアウトへの移行を前提にしているので、変更時の基準はサイドバー部分の幅で考えます。サンプルは「#sidebar:180px」で指定しています。

もっと簡単に言い換えるならば「固定幅」では「#wrapper部分」と「#sidebar部分」のみ「width」を数値指定しています。可変対応の為「#contents」などはマージン指定で設定しています。

また、ユーザビリティを高める為に定番の「パン屑ナビ」等のナビゲーションも配置、アクセシビリティを考慮して、本文を常に(x)html上で先に記述する形をとっています。

(X)HTML

htmlは固定幅タイプ、可変幅タイプ(リッキドレイアウト)共通です。

<div id="wrapper">
<div id="header">
<h1>******</h1>
</div>
<div id="container">
<div id="contents">
******コンテンツ******
<p id="topnavi">パン屑ナビ</p>
<p id="undernavi">アンダーナビ</p>
</div>
</div>
<div id="sidebar">
******サイドバー******
</div>
<div id="footer">
<p>******</p>
</div>
</div>

CSS|スタイルシート

固定幅タイプ

*{
margin: 0;
padding: 0;
}

#wrapper{
text-align: left;
width: 700px;
margin: 0 auto;
}

#header{
height: 150px;
}

#container{
width: 100%;
float: right;
margin-left: -180px;
}

#contents{
position: relative;
margin: 0 30px 0 210px;
padding: 4em 0;
}

#sidebar{
width: 180px;
float: left;
}

#footer{
clear: both;
width: 100%;
text-align: center;
}

#footer p{
padding: 0.5em 0;
}

#topnavi{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0.5em 0;
}

#undernavi{
position: absolute;
bottom: 0;
left: 0;
text-align: right;
margin-right: 2em;
width: 100%;
padding: 0.5em 0;
}

固定幅左サイドバーサンプル表示

右サイドバーにするには(右サイドバーへの変更指定)

#container{
width: 100%;
float: left;
margin-right: -180px;
}

#contents{
position: relative;
margin: 0 210px 0 30px;
padding: 4em 0;
}

#sidebar{
width: 180px;
float: right;
}

固定幅右サイドバーサンプル表示

可変幅タイプ(リキッドレイアウト)

リキッドレイアウトへの変更指定です。全体の横幅を95%で指定しています。

サイドバー部分が180pxでよければ、変更箇所は僅か1箇所です。

#wrapper{
text-align: left;
width: 95%;
margin: 0 auto;
}

可変幅左サイドバーサンプル表示

リキッドレイアウト右サイドバータイプにするには(右サイドバーへの変更指定)

#wrapper{
text-align: left;
width: 95%;
margin: 0 auto;
}

#container{
width: 100%;
float: left;
margin-right: -180px;
}

#contents{
position: relative;
margin: 0 210px 0 30px;
padding: 3em 0;
}

#sidebar{
width: 180px;
float: right;
}

可変幅右サイドバーサンプル表示

簡易解説

このレイアウトは負のマージンを利用しています。

  • 全体の幅は#wrapperで指定しています。
  • float指定をしているのは、#containerと#sidebarです。#containerに負のマージンを指定しています。
  • #contentsは#sidebar分のマージンを指定しています。(サンプルではプラス30px余白を設けました。)
  • #contentsに相対配置指定をして、#topnavi及び#undernaviの基点としています。

スポンサードリンク