2003年12月頃に、下記URLの質問があったようです。
http://q.hatena.ne.jp/1071100992
要は、CSSでデザインするよりも、ブラウザの実装とかを考えると、tableの方がいいよね、ということでした。
ただ、僕は約1年前からWebサイトの仕事を請け負ったりしているのですが、デザインといえばCSSが当たり前で、逆にtableでデザインしようとするなら、訳が分からなくなってしまいます。
また、ブラウザの実装を考えても、ブラウザにバグがあるなら、CSSを適用しない、またIE7あたりからIEのCSSの実装もかなりよさげになりそうです。
そこで、お伺いしたいのですが、約2年半前の質問と現在のCSSやtableでのデザインを比較すると、どういうふうに変わっているのでしょうか。まだ、tableを主流に置いていますか?それともCSS?
みなさんはどちらをメインにお使いになられていますか?
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があります。特に表示上は問題ありません。
もちろんお書きになっている通りCSSの解釈に関して、各ブラウザによってバグがあります。
主にIEに多いですが、予めバグを知りバグを回避するようにCSSを書けば問題ありません。必要に応じて(と言ってもIE for Macくらいですが)ハックコードを使います。
検索をすると、偉大な先人達のお陰でCSSに関するバグと解決策は沢山でてきます。
ただ、レイアウトに部分的にtableを使うのも悪くはないと考えています。
昨年辺りに大手ニュースサイトやgooがCSSにリニューアルしましたが部分的にtableを使っています。
また、日本でも人気のあるYouTubeも部分的にtableです。
asahi.com
http://www.asahi.com/home.html
Asahi-net
YouTube
私の経験ですと、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を使用するのが良いと考えています。
>反応はさっぱりだったり
そうそう、クライアントによっては未だにそういうことがありますよね。少なからずお金を掛けるんだから多少の知識と言うか基本的なノウハウはクライアント側としても持つべきなんじゃないかな・・・とか思ったり。言わないですけどねw
あと正味な話「tableレイアウトを否定されると食っていけない」っていうデザイナー(兼コーダー)も多いんじゃないかな。そういう風潮が続けば案外まだ生き残ってられると思うし。
とか思いました。
1. SEO対策
2. 動的なコンテンツ生成に向いている
3. 単純にソースが美しくて気持ちがいい
あたりが主な理由ではないでしょうか
正しい仕事をするというのは痛いほど分かります。
ただ、それがうまくクライアント側に伝わっていないというか、何というか。ソースを見せながら、「ほら、tableメインと違って、これだけソースが短くなったんですよ!」なんて言ってみても、反応はさっぱりだったりしましたから。
もちろん、ソースの視認性がアップすることにより更新性が増し、SEO的にもなお良いというのは伝わっているとは思うのですが、その効果の程がどれくらいなのかはうまく説明できませんし。
制作者側からすると、僕もHTML(XHTML)+CSSのほうが作業がやりやすいように思います(このへんは慣れなのでしょうが)ただ、クライアント側からすると、「どっちでもいいじゃん」というのが答えなのでしょうか。
僕もCSS主体に切り替えてから、ほとんどオーサリングソフトは使わなくなりました。けれど、コードに色をキレイに割り振ってくれるので、あいかわらずDreamWeaver使っていますけど。
個人的にはhtml+cssでデザインする方が効率的に作業ができるように思います。Webサイトのデザインや制作を仕事にしている人達でも常識と言っていいのではないかとも思いますが、メジャーなサイト(google,yahoo)で未だにtableレイアウトであるサイトがあるせいか、table派も未だに多いようです。
最近読んだ記事でこんなものがありました。書き込みをしている人はWebサイトのデザインや制作を仕事にしている人に限定されてないわけですが、ここまでtable派が多いというのには正直驚きました。
追記でこんな記事いかがでしょう。コメントなんかも結構参考になるのでは?
スラッシュドットジャパン(の記事)
平気な顔してtable使ってましたが、今はめっきりCSS派です。
「表」として示すべき情報は今でも表にしていますが(ex.時刻表、価格表など)それ以外の面(昔だったらレイアウトの為に使っていた部分)は全てCSSで制御するようにしています。
いまだにフレーム+テーブルレイアウトという作法を平気で使ってる業者さんも多いですけど、現在私はその尻拭的な仕事をしたりもしています。クライアントさんだってサイト運営や制作業者を比較検討をしているうちに色々知恵をつけていると思うので、「古の常識」として淘汰されていくんじゃないですかね・・・。
2についても知識があれば別ですがそれは知識があってこそ、だし、ブラウザ毎の表示の違いを無くす事などは数をこなせば慣れます。
ってことはどうせ同じような仕上げをしてくれるのであれば、制作実績から見て技術や知識の在る(と感じられる)制作会社(なり制作業者)に任せたいのがクライアントの常ではないか。と思います。値段的な差が大きいならそれはまた別の話だと思いますが。
CSSを使うことで(自分にとっての)仕事の効率が上がるという理由ももちろんですが、素人として作るサイトなら何を使おうとぶっちゃけどうだっていいと思います、ただ、あくまで仕事として金をもらってる以上「正しい仕事」をするのがまっとうなんじゃないかなぁと考えています。この辺は超個人的見解ですけど。
あとCSSメインになってからというもののめっきりオーサリングソフトを使わなくなりました。激しく余談ですが。
#長々と書きましたがあまり質問の意図にそえてない気が・・・。
WEB標準は大切なのですが、WEBに関しては標準が流動的です(T_T)。
デザインの為にtableを使うべきではないという考え自体は美しいのですが
作成したページが結果を伴わないと製作者もクライアントも嬉しくないのが現実です。
結局将来的には徐々に変っていくしかないでしょうが、今はtableを多く使っています。
全てのブラウザが同じ表示に統一される時代が来て欲しいと思います。
IE5.xを使用するマックユーザーが多いので、Tableですね。
ただし、Tableは大枠を決めるのにとどめ、TD内にDIVなどで枝要素を納めています。
tableで組む方はたくさんいらっしゃいますし、現場レベルでも
「どうしてます?」と聞かれることがまだまだ多いです。
私は結論、ターゲットや目的に応じて柔軟に対応すべき
ことではないかと考えています。
たとえば音声読み上げソフトに対応したサイトと
ビジュアルの美しさを全面に打ち出す必要があるサイトでは
コーディングの方法も変わってきますよね。
HTMLとして正しいコーディングを行うことが求められるのは
当然のことですが、いかんせんブラウザ側の解釈に違いが
生じるので「崩れにくいレイアウト」を重視する場合なら
tableで組むのもやむを得ないと思います。
個人的にはCSS+XHTMLで組むに越したことはないと思います。
そうなんですよね。Yahooなんかもtableで作られていますね。
でも、はてなダイアリーとかはデフォルトなら、コンテンツはCSSで組まれていますね。
大手のポータルサイトなんかはアクセシビリティを絶対的に考慮すべきなのに、なぜtableなんだろうとかは思ってしまったりするのです。
正論だとは思うのですが、その正論と現場の乖離というのはどうなのかなという疑問から、今回質問させてもらいました。
例えば、Webサイトを発注する側には、そんなWeb標準がどうたらこうたらが通じるのか、それよりIEだけでもキレイに表示されたほうがよいのではないか、それならtableのみで構成ということも考えられる気がするのです。
tableレイアウトは使うべきではないかと。(tableを表として使う分にはかまいませんが)
tableの本来の使用目的が「表」ということがまず第一にあげられます。特に視覚障害者向けブラウザでは悪影響が出ると聞いたことある気がします。
CSSの利点として外部CSSファイルに記述することが出来るため、サイトを統一しやすいです。table基本だとデザインの一部変更をするために何百ものファイルを書き換えなければならない、なんて事にもなりかねませんので。。。
現在のところブラウザ毎のCSS解釈の違いは確かにあります。
しかし、CSSのバグ(仕様っぽいけど)を利用してブラウザ毎に違う指定をする、「CSSハック」という技を使えば解決出来ることが殆どですので、CSSでレイアウトを組むべきだと思います。
ちなみに大手ポータルサイトがCSSレイアウトに変えたということで話題になりました。
最近ではIEのシェアが少し減ってきて、CSSへの対応が進むFirefox(Mozilla系ブラウザ)のシェアが伸びてきてるの事も良い傾向でしょう。Operaもかなり対応してます。IEも7では改善されるでしょうし、問題が多いと聞くのはmarginあたりのバグぐらいですのでCSSハックで解決してしまった方が早いでしょうね。。。
“Web標準で作る”ということは、当然に“正しいHTML”でページを作成するということです。
“正しいHTML”ということは、当然、そのHTMLを構成するタグも、正しい使い方をされなければなりません。
レイアウトをtableタグでマークアップする場合がありますが、
本来tableタグはレイアウトをするためのものではなく、
表を表示するためのものです。なので、レイアウトを組むためにtableを使うのは、本来は良くないとされています。
まず、正しいHTMLで文書をマークアップし、そしてCSSでレイアウトをしていきます。
仕事としては「(X)HTML + CSS」でないともうダメですね。
tableレイアウトはもう考えられません。CSSでやることの不便さでかえって時間喰ったりすることも確かにあるし、そういうときはストレスにもなっていますが、後で見るとHTMLが単純な記述で判読しやすくなってると思います。クライアントサイドでは関係ない話かもですが。
リニューアルなどでよっぽどクライアントが要求してきた場合に限りtableレイアウトを継承しますが、そうでなければ勝手にCSSレイアウトに変えてしまいます。
CSSは、設定が細かく、固定のHPにしか役立ちません。
*自身の経験によるものです。
Tableであれば、ピンポイントで表示文字の設定などの変更がやさしくなります。
CSSで設定すると、HP全体が変わるので、小さいHPには、向きません。
TABLEは、全体を変更する際に、問題がありますが、過去の仕事上では、大きいHPには便利でした。
顧客のターゲット層によって使い分けてます。
若い世代(ネットをよくわかってそうな世代)はCSSと多用します。
中高年がターゲットの場合、デザインが狂いにくいようにtableを使います。
でも基本的には大まかにtableで組んでCSSで細かい修正といった感じです。
なるほど。
確かに、tableを入れ子にするのはよろしくないですね。あとで、自分で書いたコードながら、正直よく分からなくなってしまったことが何度かありました。そのへんは、CSSを重宝しています。
大手ポータルサイトもCSSに移行しているとは知りませんでした。(個人でやっている自分の情報の遅さですね)あとから、ソースを参考にしてみたいと思います。
CSSのハックのコードは使い方にいつも迷います。それならいっそのこと、CSSを読み込ませないほうが方法としてはよいのかなとも思いますし。このへんは、ブラウザの浸透具合を見ながら、今後対応していくという状況でしょうか。(個人的には、そういうモダンブラウザ以外のブラウザを使っている人は、なぜそのバージョンを使っているのか、非常に気になるところですが。)