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

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

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

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

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

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

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

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