スタイルシート段組の解説

無料テンプレートの段組解説

1段組レイアウトの解説

参考図


<div id="container">
<div id="header"> </div>
<div id="contents"></div>
<div id="footer"></div>
</div>

#containerの中にそれぞれ#header、#contents、#footerを配置してます

▲このpageの上へ|目次へ

2段組レイアウト（左サイドバー）の解説

参考図


<div id="container">
<div id="header"> </div>
<div id="box">
<div id="contents"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</div>

containerの中にそれぞれ#header、#contents、#sidebar、#footerを配置してまが、更に#boxという要素で#contents、#sidebar、#footerを囲んでいます。

#contentsには---float:right

#sidebarには----float:left

#footerには-----clear:bothを指定してあります。

▲このpageの上へ|目次へ

2段組レイアウト（右サイドバー）の解説

参考図


<div id="container">
<div id="header"> </div>
<div id="box">
<div id="contents"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</div>

containerの中にそれぞれ#header、#contents、#sidebar、#footerを配置してまが、更に#boxという要素で#contents、#sidebar、#footerを囲んでいます。

#contentsには---float:left

#sidebarには----float:right

#footerには-----clear:bothを指定してあります。

▲このpageの上へ|目次へ

3段組レイアウトの解説

参考図


<div id="container">
<div id="header"> </div>
<div id="box">
<div id="box2">
<div id="contents"></div>
<div id="left_sidebar"></div>--左側
</div>
<div id="right_sidebar"></div>--右側
<div id="footer"></div>
</div>
</div>

containerの中にそれぞれ#header、#contents、#left_sidebar、#right_sidebar、#footerを配置してまが更に

boxという要素の中に#box2、#right_sidebar、#footerを配置。box2の中に#contents、#left_sidebar（左）を入れています。

少々ややこしいですがSEO対策でコンテンツの内容をHTML内で上階層に記述する為です。

#box2には----------float:left

right_sidebar（右）には----float:right

#box2内の

#contentsには------float:left

#left_sidebar（左）には----float:right

#footerには-----clear:bothを指定してあります。

▲このpageの上へ|目次へ

Home

スタイルシート(CSS)レイアウト