3カラムリキッドレイアウトのCSSサンプルソース

現在地: Home » 上級スタイルシートレイアウト講座：目次 » 3カラムリキッドレイアウトのCSSサンプルソース

3カラムリキッドレイアウトのCSSサンプルソース

ここでご紹介するレイアウト/段組は「floatで段組する可変幅｜リキッドレイアウト」ですが、いつでも「固定幅」へ移行しやすいような段組になっています。勿論、横幅指定は自由に変更可能で、スタイルシートの指定変更で左右のサイドバーを入れ替える事も自在です。

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

(X)HTML

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

<div id="wrapper">
<div id="header">
<h1>*****</h1>
</div>
<div id="container">
<div id="contents">
<div id="contents-inner">
***** コンテンツ *****
<p id="topnavi">パン屑ナビ</p>
<p id="undernavi">アンダーナビ</p>
</div>
<!-- contents-inner/end -->
</div>
<!-- contents/end -->
<div id="left-sidebar">
***** 左サイドバー記入 *****
</div>
<!-- left-sidebar/end -->
</div>
<!-- container/end -->
<div id="right-sidebar">
***** 右サイドバー記入 *****
</div>
<!-- right-sidebar/end -->
<div id="footer">
<p>著作権表示</p>
</div>
</div>

CSS｜スタイルシート

固定幅タイプ

*{
margin: 0;
padding: 0;
}

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

#header{
height: 150px;
}

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

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

#contents-inner{
position: relative;
margin: 0 200px;
padding: 4em 0;
}

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

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

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

#footer p{
padding: 0.5em 0;
}

可変幅サンプル表示

可変幅タイプ（リキッドレイアウト）

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

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

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

固定幅サンプル表示

簡易解説

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

全体の幅は#wrapperで指定しています。
float指定をしている対象は、#containerと#right-sidebar及び#contentsと#left-sidebarです。
#contents内に#contents-innerを設けました。この部分が可変します。
#contents-innerに相対配置指定をして、#topnavi及び#undernaviの基点としています。

▲Top