Webサイトのデザインや制作を仕事にしている方々にお伺いします。


2003年12月頃に、下記URLの質問があったようです。

http://q.hatena.ne.jp/1071100992

要は、CSSでデザインするよりも、ブラウザの実装とかを考えると、tableの方がいいよね、ということでした。

ただ、僕は約1年前からWebサイトの仕事を請け負ったりしているのですが、デザインといえばCSSが当たり前で、逆にtableでデザインしようとするなら、訳が分からなくなってしまいます。

また、ブラウザの実装を考えても、ブラウザにバグがあるなら、CSSを適用しない、またIE7あたりからIEのCSSの実装もかなりよさげになりそうです。

そこで、お伺いしたいのですが、約2年半前の質問と現在のCSSやtableでのデザインを比較すると、どういうふうに変わっているのでしょうか。まだ、tableを主流に置いていますか?それともCSS?

みなさんはどちらをメインにお使いになられていますか?

回答の条件
  • 1人10回まで
  • 200 ptで終了
  • 登録:
  • 終了:2006/06/16 09:40:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答18件)

すべて | 次のツリー>
基本的にCSSで、場合によってtableでしょうか。 amatoboss2006/06/16 03:03:42ポイント2pt

2003年当時と今とでは状況が大きく変わりましたね。

おそらくSection508条とJIS-8341-3によるアクセシビリティの影響が大きいと思います。

私の場合はほとんどCSSで制作を行っています。tableを使うのは本来の「表」を表すときぐらいです。

IE5以上及びFireFoxやOpera等のモダンブラウザでしたら、概ねCSSで全ての見栄えを行っても問題ないでしょう。

私の場合は、WindowsではIE5以上、FireFox1.04以上、Opera7以上、NN6以上、MacはSafari1以上、FireFox1以上、NN7以上、IE for Mac5.2以上で表示確認を行っています。

CSSでレイアウトを行っている有名なサイトでは、例えばYahoo!(米国)やniftyがあります。特に表示上は問題ありません。

http://www.yahoo.com

http://www.nifty.com/

もちろんお書きになっている通りCSSの解釈に関して、各ブラウザによってバグがあります。

主にIEに多いですが、予めバグを知りバグを回避するようにCSSを書けば問題ありません。必要に応じて(と言ってもIE for Macくらいですが)ハックコードを使います。

検索をすると、偉大な先人達のお陰でCSSに関するバグと解決策は沢山でてきます。

ただ、レイアウトに部分的にtableを使うのも悪くはないと考えています。

昨年辺りに大手ニュースサイトやgooがCSSにリニューアルしましたが部分的にtableを使っています。

また、日本でも人気のあるYouTubeも部分的にtableです。

asahi.com

http://www.asahi.com/home.html

Asahi-net

http://asahi-net.jp/

YouTube

http://www.youtube.com/

私の経験ですと、YouTubeの動画の一覧表示のように、左に画像、右に文章(headeingやp、ul、ol)を置き、全体を角が丸い枠で囲うというデザインをCSSで行ったことがありますが、divの入れ子、clear等で、結果的にhtmlソースがtableを使ったものより複雑になってしまいた。(ただ単に自分の能力不足かもしれませんが)

また、横幅一杯の100%ではないリキッドデザインのサイトを制作する場合は、全体のレイアウトにtableを使うのが良いかもしれません。CSSで行う場合は、テクニカルなCSSソースになります。

ただ、全体を単一のtableで囲ったり、tableをネストはするべきではないと考えています。

tableは全てを読み込んでから表示を開始しますので、全体をtableで囲うと表示が遅くなってします。ブロードバンド環境ですとそれほど意識しませんが、ナローバンド環境を考慮する際は注意が必要です。

レイアウトにtableを使う場合は、例えばheader部、メイン部、footer部など大まかに区分けして、全体を一つのtableで囲うレイアウトは避けたほうが良いでしょう。

tableを入れ子するのは、上記の問題に加えて、アクセシビリティの問題(tableのcelは左上から右へ読まれるので内容が伝わらなくなる可能性が高い)、ソース容量の問題、修正・更新の問題から最低限避けた方が良いでしょう。

修正・更新については、少数のプレーンなhtml+CSSならまだ良いですが、多数のページを修正するとなると相当骨が折れます。また、phpやPerlなどの場合は、プログラムコードを修正する必要が出て来ますので面倒です。

最後に月並みは言いようになってしまいますが、CSS及びtableのメリット・デメリットをクライアントに説明し、ニーズを汲み取り提案をしてどちらにするか決めるのが宜しいかと思います。

なお、蛇足ながらhtmlはxhtmlに収斂して行きますので、出来るだけhtml4.01strictまたはxhtmlを使用するのが良いと考えています。

詳しい説明ありがとうございます。 あらた2006/06/16 09:39:08

なるほど。


確かに、tableを入れ子にするのはよろしくないですね。あとで、自分で書いたコードながら、正直よく分からなくなってしまったことが何度かありました。そのへんは、CSSを重宝しています。


大手ポータルサイトもCSSに移行しているとは知りませんでした。(個人でやっている自分の情報の遅さですね)あとから、ソースを参考にしてみたいと思います。


CSSのハックのコードは使い方にいつも迷います。それならいっそのこと、CSSを読み込ませないほうが方法としてはよいのかなとも思いますし。このへんは、ブラウザの浸透具合を見ながら、今後対応していくという状況でしょうか。(個人的には、そういうモダンブラウザ以外のブラウザを使っている人は、なぜそのバージョンを使っているのか、非常に気になるところですが。)

すべて | 次のツリー>

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

  • WEB標準 マックミニスト - Macminist 2006-06-16 21:55:59
    はてなに興味を引く質問があった。WEB標準と一口に言うが、これだけIEが普及しているなら多数派としてそれを標準としないのはタダの独りよがりといっても過言でないかもしれない。しか
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません