[CSS]コンテンツ箇所をHTMLの上部に配置するスタイルシートのトリック

サイト構築 -CSS

Post on:2009年4月7日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp

コンテンツ箇所をHTMLの上部（ヘッダ・ナビゲーションより上）に配置するスタイルシートのトリックをSoh Tanakaから紹介します。

Markup Hierarchy - Advantages in SEO
demo

上記のようなレイアウトをHTMLで記述した際、上左の順番で配置するのが一般的ですが、「float」と「position: absolute;」を使用して、下記のようにコンテンツ箇所を先頭に配置しています。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<div id="main" class="container">
	<div id="content">Content</div>
	<div id="header">Header</div>
	<div id="sidecol">Side</div>
</div>
<div class="container">
	<div id="footer">Footer</div>
</div>
</textarea>

<div id="content">Content</div>

<div id="header">Header</div>

</div>

<div id="footer">Footer</div>

</div>

</textarea>

CSS

<textarea name="code" class="html" cols="60" rows="5">
#content{
	float: right;
	width: 685px;
	margin: 120px 0 0 0;
	padding: 20px;
}
#header{
	width: 970px;
	position: absolute;
	top: 0; left: 0;
}
#sidecol{
	width: 235px;
	position: absolute;
	top: 150px; left: 0;
}
#footer{
	float: left;
	width: 970px;
}
</textarea>