其の5 テーブルとCSSを使い分ける | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像

レベル上級其の5

テーブルとCSSを使い分ける


文章の構造化はHTMLに任せ、レイアウトはCSSに任せるという流れが推奨されている。だが、現在でもテーブルレイアウトで公開されているWebサイトは多くある。

テーブルレイアウトについては賛否両論があるが、現実問題としてテーブルを利用した方が効果的な場面というものがあることも事実だ。実際、CSSのみではテーブルで行えたことが再現しづらかったり、作業に手間が掛かったり、表現することが無理だったりすることもあるからだ。

また、XHTMLとCSSを利用しての構造と表現の分離という部分が、現時点では徹底できない問題もある。だからといって、テーブルレイアウトを推奨しているわけではなく、やはり可能な限りはCSSに移行していくべきだろう。

むやみにCSSを使用するのではなく、ケースバイケースでテーブルなのか、CSSなのか、あるいはこれらを混在させるのかを、下記のような角度から熟考した上で制作すべきである。

  • 閲覧環境:モダンブラウザ以外での閲覧をどこまで考慮するのか?
  • デザイン:見た目重視なのか、SEOあるいは情報重視なのか?
  • メンテナンス:更新の頻度、コンテンツの追加の頻度など
  • サーバーの負担:XHTML本体がすっきりするのでサーバーのデータ転送量が減る
  • 音声認識ブラウザ:テーブルレイアウトだと意図するように読み上げられない
  • コスト・時間:テーブルからCSSに移行するにはそれなりの時間とコストが掛かる

もちろん、上記だけが判断材料ではないので、制作するサイトが何を目的とし、誰が見るのかなどを検討した上で、判断することが大切だ。

また、CSSをレイアウトに凝り過ぎてかえってソースが増えてしまったり、ほかのブラウザによってレイアウトがすぐ崩れてしまうサイトをちらほら見かける。テーブルをいくつも入れ子などにして使い過ぎるのは問題だが、無理をしてCSSで制作したあまりに、情報をキチンと伝えられなくなってしまうのは本末転倒なので注意したい。


お作法一覧へ
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在