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

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

レイアウトのキャプチャ

Markup Hierarchy - Advantages in SEO
demo

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

コンテンツをHTMLの先頭に配置したイメージ図

HTML

CSS

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

sponsors

top of page

©2018 coliss