CSSレイアウト サンプルソース

ここでご紹介するレイアウト/段組は「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の基点としています。