3カラムレイアウト - 表示させる優先順位を決定

左右・センタースペースの配置とHTML上の優先順位を決める。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

3カラムレイアウト - 表示させる優先順位を決定

3カラムレイアウトでも2段組レイアウト同様に、左右・中間の枠を自由に配置し、HTML上でも優先順位の通りに記述することができます。

HTML記述順と表示順の例

上の図は、テーブルレイアウトによるHTMLの記載順・ブラウザ上の表示順と、CSSレイアウトによるブラウザ上の表示順を比較したものです。ご覧の通り、テーブルレイアウトの場合はHTMLに記載した順に左から表示させることしかできませんが、CSSレイアウトの場合は枠の取り方次第で様々な順番で表示することが可能です。

通常はメインスペースにそのページのキーワードが多く含まれるため、HTMLの記述をメインスペースから行うことでSEO効果が向上します。しかし、メインスペースを左右どちらかに寄せ、端から2つの枠をメニューとして使う特殊なレイアウトを組む場合は、本文の記載スペースを先に記述する方が効果的です。

いずれにせよ、本文の記載スペースをHTMLの上部に記載することでSEO効果が高まりますので、HTMLの記述順位と表示上の配置順位をよく考えて記述するようにしましょう。