css

テーブルレイアウトとCSSレイアウト

ホームページを作成する際のレイアウトの組み方は、大きく2つの方法があります。
テーブルタグを使ってレイアウトを組む方法と、CSSを使って組む方法です。

現在、どちらの方法を使うのが好ましいかというと、CSSでレイアウトを組む方法が推奨されています。
これは私個人の主観論ではなく、Webの世界での常識になっています。

現在どのような手法が推奨されるかというのは「W3C」という団体が国際的な基準を定義しています。W3Cがどのような団体であるのかをここでは説明しませんが、興味のある方は検索サイトで「W3Cとは」と入力して検索してみるといいでしょう。

レイアウトの話に戻りますが、先ほども言ったように現在ではCSSを使ってレイアウトを組むのが好ましいとされています。しかし、一昔前まではテーブルタグを使ってレイアウトを組むのが常識でした。(CSSがまだ整備されていなかったため、テーブルタグでレイアウトを組むしかなかったのです。)

テーブルタグを使ったレイアウトというのはCSSでのレイアウトに比べ、様々なデメリットが生じます。

テーブルレイアウトの悪い点 ※1 CSSレイアウトの良い点
ページ容量が重くなる ページ容量が軽くなる
SEO対策に不利 SEO対策に有利
音声ブラウザに対応できない 音声ブラウザに対応できる

逆に、テーブルレイアウトの良い点を見てみましょう。

テーブルレイアウトの良い点 CSSレイアウトの悪い点 ※2
レイアウトを組むのが比較的簡単 レイアウトを組むのが少し難しい
各ブラウザ間での表示のずれが少ない 各ブラウザ間での表示のずれが多い

以上を見てわかることがあります。

CSSレイアウトの悪い点(※2の部分)については、ホームページの制作者の技術によってテーブルレイアウトと同等またはそれ以上にすることが可能です。

しかし、テーブルレイアウトの悪い点(※1の部分)については、ホームページの制作者の技術がどれほど優れていてもCSSレイアウトと同等にすることは不可能なのです。

それがテーブルレイアウトの限界であり、現在推奨されない理由なのです。

文字の大きさ

ホームページ作成に関するコラム

最近のつぶやき

自画像

ホームページ更新したよ。

自画像

時間かかったよ。

自画像

ぽんぽん痛い。

XHTML+CSS

このページは正当なCSSです
このページはインターネット上の技術標準を定める組織「W3C」から、正当なCSS2.1として検証を受けています。
このページは正当なXHTMLです
このページはインターネット上の技術標準を定める組織「W3C」から、正当なXHTML1.0として検証を受けています。
このファイルはすべてのチェックをクリアした優秀なページです
このページはウェブサイトのアクセシビリティを診断するFUJITSU製のソフトウェア・WebInspectorで、「このファイルはすべてのチェックをクリアした優秀なページです。」との認定を受けています。

サイト内検索