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

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

Markup Hierarchy – Advantages in SEO
demo

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

HTML

<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>

CSS

#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;
}

SEO的にはユニークな内容が上部にあるため、効果がありそうです。セマンティック的には、順番に配置されている方がすっきりすると思います。

Post on:2009年4月7日