スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ページレイアウトの最小単位

なぜ、テーブルレイアウトは CSS を使うよりも簡単そうに見えるのか。

通常は、レイアウトのためのまとまりは、ブロック要素を基準にする。
テーブルレイアウトでは、行やセル。(<TR>, <TD> など)
CSS では、見出しや段落。(<Hn>, <P>, <DIV> など)

※テーブルと CSS のハイブリッドレイアウトは考えない。

まず見た目で判断すると、
テーブルレイアウトは、ドローソフトなどでグリッドを表示して描くのと同じように、方眼紙の上に積み木を並べていく感じ。
一つのまとまりが大きく、並べやすい。

ただし、テーブルの枠組みが決まっているため、一つのセルの大きさを変更すると他のセルの大きさ(同じ列のセルの幅や同じ行のセルの高さ)も変わってしまう。
そのため、コンテンツの大きさや配置が固定されることが多い。

CSS レイアウトはどうか。
見出しや段落を自由に配置できるため、多くのスタイル設定を覚えなければならない。
自由度が高いため凝ったデザインも可能だが、シンプルなものが多い。
その代わり、段落の大きさを変更しても他の要素に干渉することなく、崩れにくいデザインにすることができる。

次に、HTML のソースそのものをプログラムから見てみる。

テーブルレイアウト:
文書構造はページの見た目どおり、左上から右下という順番に固定される。
見出しと段落がセルごとに分断されることが多いため、処理しにくい。
コンテンツに対してタグの量が多く、処理が複雑。
CSS レイアウト:
文書構造はページの見た目とは異なる。
デザインと文書構造が分離しているため、処理しやすい。
コンテンツに対して余計なタグが少く、処理が簡単。

テーブルレイアウトは、作る人から見ると簡単。
CSS レイアウトは、プログラムから見ると簡単。

テーブルは、二次元的。
CSS は、一次元的。

どういうことかというと、
テーブルレイアウトは、人の視覚に頼って情報を得やすい。
CSS レイアウトは、プログラムを介して情報を得やすい。

"人が目で見るだけ" なら、テーブルレイアウトで十分でしょう。

関連記事

コメント

コメントする

管理者にだけ表示を許可する

この記事のトラックバックURL

http://chimantaea.blog8.fc2.com/tb.php/34-37f43578

※トラックバック元には、この記事へのリンクを含めてください。