asrite.net - TOP

tableレイアウト・divレイアウトの利点と欠点

サイトのレイアウトを組む方法は、おおまかに
 1. tableタグを用いた tableレイアウト、
 2. divタグとcssを用いた divレイアウト
の2つに分けられます。

私は、かなりのdivレイアウト派であり、
今持っているサイトのレイアウトは必ず div+css であるのはもちろんのこと
しばしば日記やらなんやらで tableレイアウト を批判したりしたこともありました(ぁ

しかし! 決して tableレイアウト が悪いと言う訳ではなく、
tableレイアウトにもそれなりの利点g(長くなりそうなので略

tableレイアウトについて

概要

bodyの直後あるいはその付近にtableタグが登場し
表のデータ部分の結合を駆使してレイアウトを組む方法。

長所・短所

長所
  • 幅を指定しなければ、ブラウザ側で全体幅を自動調整してくれる
  • レイアウトが崩れない
  • cssの知識がさほど必要ない(本気出せば「全く」必要ありません)
  • 複雑なレイアウトも容易に実現可能。
  • いわゆる「ホームページ作成ソフト」向け。
短所
  • レイアウト変更の際は、全ページに手を加えないといけない。
  • 全体の配置がある程度決まらないと内容作成に移れない。
  • html記述の順番が制限される
  • レイアウトが複雑になると、ソース部分がごっちゃになってくる
  • 何かかっこ悪い(偏見)

divレイアウトについて

概要

メニュー部、コンテンツ部、ボトム部などのいくつかのまとまりに分けて記述し
cssでそれぞれの配置を決定させてやる方法。

長所と短所

長所
  • 自由度が極めて高い。
  • レイアウト変更の際は、最悪の場合cssファイル1つの編集ですむ。
    それゆえ、ちまちましたレイアウトの変更も可能。
  • htmlの骨組みさえ決めれば、レイアウトをサイトが完成した後でさえ考案することもできる。
  • htmlを自由に記述できる(メニュー部分をメイン部分の後に記述するなど)
  • htmlソースがきれいにまとまって、見やすいし、表示が軽い(気がする)
  • 何か次世代な感じがする(ry
短所
  • 正直、めんどい(ぁ
  • ブラウザごとに表示が違うことがあるため、それを修正する必要がある。
  • 横に複数段を作る場合、幅を明示的に指定しなければならない。
  • 少しミスするとレイアウトが「ぼてっ」と崩れる。
  • それなりのcssの知識が必要。
  • テキストベースでの作業になりがち(少なくとも私は)。

[おまけ]body直下型レイアウトについて

概要

divやtableを使わず、いきなり文章などを記述する方法。
最悪の場合 body さえも記述しないこともある。

長所と短所

長所 簡単。直感的。わかりやすい。何より学びやすい。
短所 複雑なレイアウトが組めない。htmlの規格にのっとってない(ぁ

結論

何か時代の流れからすると、tableレイアウトは推奨されない風潮になってます。
サイト作成に関する本や教育の場(てか私が受けた情報の授業)などでも
既にdivレイアウトをメインとして解説しているようなんですが、
記憶にある限りでは「html,xhtml規格」には、そのようなレイアウトを規定した部分はありません。
つまりあれだ
規定されていないということが正しければ、
divだのcssだの言ってるのは各人の好みでしかないと言うことなんですよ。

- 結論 -
みなさんがどのレイアウト方式を取ろうと自由です。
しかし、私は div+cssレイアウト 派なのでこれを使います。
tableレイアウトを批判するのも、ただの私の偏見でしかありません。

・・・まぁxhtml規格でdivレイアウト必須って規定されたら終わりか(ないと信じるけど)。

▲ ページトップへ ▲