• サイトマップ

レイアウトの方法

Webにおけるレイアウトの方法は2つあります。1つはテーブルを用いたレイアウト。 2つめはCSSのレイヤーを用いたレイアウトの方法です。

この2つの方法にはそれぞれメリット・デメリットがあり、 どちらが良いとは一概には言えません。 サイトの目的、ターゲットユーザによって選択していけばよいのではないでしょうか。

テーブルを用いたレイアウト

テーブルを用いたレイアウトとは、本来、 表を表す<table>タグを用いてレイアウトする方法で、 テーブルのセルの中に各要素を入れて画面上に配置します。

この方法は現在まで主流となってきた方法です。 主要な多くのブラウザで表示できるのでユーザの環境に対応しやすい というメリットがあります。

しかしながら、デメリットもあります。複雑なレイアウトの場合、 テーブルを何重にも重ねると、非常に表示の遅い、 重いページになってしましますし、HTMLソースも複雑で見にくいものになります。 また、主要なブラウザではない、 例えばテキストブラウザや音声ブラウザなどはこのテーブルレイアウトでは対応できません。 本来表の意味を持つテーブルを使うため、正しく認識されないからです。 国際的にWebの標準化を行っているW3Cという団体でも テーブルを用いたレイアウトは使わないようにと勧告されているのも事実です。

しかし、実際のところはまだまだテーブルを用いたレイアウトが主流であることに 変わりありません。 CSSの解釈もだいぶよくはなってきたものの、 やはりまだばらつきがあり、正確かつ、幅広い環境に対応するには難があります。

CSSレイヤーを用いたレイアウト

CSSレイヤーを用いたレイアウトとは、ずばりそのまま、 CSSのレイヤーを用いて、各要素を画面上に配置しレイアウトする方法です。

この方法はCSSを利用し指定するので、文章の論理構造をHTML、 デザインをCSSと、分けて記述できるためシンプルで、 かつ、わかりやすいHTMLソースを作成することができます。 また、テーブルを用いたレイアウトでは難しかった、 テキストブラウザや音声ブラウザにも対応できるという利点もあります。 そのほかにも、CSSを修正するだけでたくさんのページのデザインを 一度に更新することができたり、ユーザにデザインを選ばせるなんてこともできます。

でもやっぱりデメリットはあります。 まずブラウザによって解釈がまちまちであると言う点。 複数のブラウザを対象とした場合やはり意図したデザインで表示できない という問題があります。

この問題を解決するためには非常に高度なブラウザやCSSに対する知識が必要ですし、 場合によってはJavaScriptでブラウザによってページを分岐する といった仕掛けがいるなんてこともあります。

結論・まずはテーブルを用いたレイアウトから

これは僕個人の意見ですが、 やはりレイアウトはテーブルを用いたレイアウトから始めるのがよいと思います。 CSSも勉強しつつ、経験と知識をためこみ、 充分に理解を深めてからCSSを使ったレイアウトへとシフトすればよいのではないでしょうか。 現時点ではブラウザなどの環境などからみても、 テーブルを用いたレイアウトが有効だと思います。

各レイアウトの具体的な方法はのちのち公開していきたいと思っています。 Web上でもこの方法の解説を行っているサイトはたくさんあるので、 本と合わせて勉強すればきっと習得できるはずです！ 下に僕のオススメサイトのリンクを張っておくので参考にしてみてください。

とほほのWWW入門

王道中の王道サイトです。テーブルについて学んでみてください。