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

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

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

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

CSSレイアウトの利点のひとつに「優先させたい順序でHTMLを記述することができる」というのがあります。

通常、TABLEタグを利用したレイアウトですと、左側に表示させるものがHTMLでは上に、右側に表示させるものは下に記述しなければなりませんが、CSSでは左右どちらでもメインスペース部分を先に記述することができます。

HTML記述順と表示順の例

tableでレイアウトした場合(上)とCSSでレイアウトした場合(下)の、HTMLの記述順序とブラウザ上の表示順序の関係を表したものです。

この図のとおり、TABLEタグでレイアウトした場合は、HTML上で先に記述したものがブラウザでは先(左)に表示されますが、CSSを利用することでHTML上の後先とは関係なく、自由に表示の優先順位をつけることができます。

CSSのレイアウトでは、まずこの優先順位を決めることから始めます。メインスペースを左右のどちらに持ってくるのか、HTMLの記述順位(SEOとして強調したい順位)はどちらが先かを決定しましょう。

参考までに、当サイトの個別ページ(このページのことです)は、メインスペースを左、サイドバーを右に配置し、HTML上もメイン~サイドの順に記載しています。TABLEタグでもできる配置および記述順ですが、ユーザビリティー、文章の見易さ等を考慮し、このような順番になっています。