テーブルレイアウトのデメリットとCSSのメリット

質問

私は現在フリーランスのデザイナーをやっていますが、メインはDTPと商品撮影で、Webは余り得意じゃありません。
私がHP作成を覚えた頃はDreamweaver4で、未だにテーブルレイアウトで作成しています。
CSSも覚えようと本を買って勉強したのですが、どうにもメリットが感じられず現在に至ります。
※恥ずかしながらHTMLもまともに読めません。
そこで質問なのですが、テーブルレイアウトはそんなにダメなのでしょうか？
私が作るページは小規模の店舗相手が多いので多くても5ページくらいのサイトになります。
なのでデザインを変えるときはゼロからやっても何の苦にも思いません。
100ページとかのサイトばかり作ってれば意地でもCSSを覚えたでしょうけど。
今まであくまで「デザインだけ」と割り切ってきましたが、今後のことを考えると主流に乗るのが利口だと思います。

余り深い知識がないので、できるだけわかりやすく簡潔に説明いただけると助かります。
以上、回答お願い致します。

回答No.5

神崎 渉瑠（@taloo） · ベストアンサー

No.1 お礼
>＞＊SEOについては殆どの場合、<meta>のdescriptionで回避できます。
>これについてもう少し詳しく教えていただけると助かります。

たとえば添付画像は「html」というキーワードでgoogleで検索した結果ですが、
検索結果にページの概要が表示されます。
テーブルレイアウトを使うと、この概要が期待したとおりの内容が出ないことがあります。
これに対応するための方法が<meta>のdescriptionです。

CSSレイアウトにすればdescriptionがなくても概要がうまく表示「されやすい」、というだけで、
下手な作り方をすればdescriptionが必要です。

詳しくは「meta description」で検索して下さい。

回答No.4

神崎 渉瑠（@taloo）

もう一つメリット。
というか、これが一番の目的のはずですけどね(^^;

・スタイルシートに対応していないグラフィカルブラウザでもレイアウトが可能。

CSSがなかった時代に段組表示させるために使っていたのがテーブルレイアウトですから。
主だって使われているグラフィカルブラウザの全てがスタイルシートに対応していますから、このメリットは殆どありません。

お礼

再度回答ありがとうございます。
なるほどｗ たしかにメリットですね。

回答No.3

nori_007

メリット、デメリットと質問している時点で、メリットはないと思います。
但し現状DreamweaverCS4でも、ホームページビルダーV14でも基本はCSSになっています。この現状をどう理解しますか。

また、以前ここの質問で以下のリンクを参考にしてください。
http://oshiete1.goo.ne.jp/qa5467980.html

他にも色々話題になっていますので検索することをお薦めします。

お礼

回答ありがとうございます。
＞但し現状DreamweaverCS4でも、ホームページビルダーV14でも基本はCSSになっています。この現状をどう理解しますか。
アプリが最新の機能に対応しても、結局テーブルを作ることから始めてしまうのでたぶん私には豚に真珠なのでしょうね。
リンク先は後でじっくり拝見させていただきます。

回答No.2

ORUKA1951

デメリットも何も、そもそもウェブ製作者が必ず読まなくちゃならない仕様書を見てないことになるよ。
　オーサリングツールを使うと、HTMLのタグは覚えなくて良いかもしれないが、HTML自体は、テキストエディタで作成する人以上に、しっかり知っておかないと、テーブルで配置したりと、とんでもないサイトを作ってしまう。
　一度仕様書を最初から最後まで通し読みしておくと良いです。Dreamweaverのマニュアルの数十分の一もないよ。オーサリングツールの使い方を覚えるより、はるかに容易なはずなんだけど？？？？

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
こうしたテクニックの例を挙げよう。
メーカー独自拡張のHTMLを使う。
テキストを画像に置き換えて表現する。
余白制御のために画像を用いる。
ページレイアウトの目的で表を用いる。
HTMLでページを作らずにプログラムに頼る。
こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

お礼

回答ありがとうございます。
プログラム言語が苦手な私にはかなりハードルが高そうに思えてきました。
おっしゃることは理解できるのですが、頭が対応できそうにありません。
恥の上塗りな質問ですが、
＞一度仕様書を最初から最後まで通し読みしておくと良いです。
仕様書とはどこで拝見できる物なのでしょうか？

回答No.1

神崎 渉瑠（@taloo）

デメリット：
・HTML解析ツール（主に検索ロボット＝SEO関連）を使用したときに、期待したとおりの解析結果（検索結果に表示されるページ概要）が得られないことがある。
　＊SEOについては殆どの場合、<meta>のdescriptionで回避できます。
・音声ブラウザやテキストブラウザで表示したときに、綺麗にレイアウトされない、または読みづらくなることがある。
　＊これらのブラウザの利用率は0.1%未満（少なすぎて測定不能）です
・JavaScriptを使用してページ内を動的に書き換える場合、レイアウトが崩れることがある
　＊CGI（Perl、PHP等）やJavaScriptを使うときはHTML、CSSを理解していることが前提ですので、
　> ※恥ずかしながらHTMLもまともに読めません。
　このレベルでしたら、このデメリットに影響されるはまずありません。
・複数のページで共通のレイアウトやデザインにするときに、デザイン部分も含めてコピーしていかなければならないことがある。
　＊レイアウトはともかく、デザイン部分だけCSSに出来ますのでデメリットとも言い難いですし、
　また、通常はオーサリングソフトを使いますから、デザインの複製（テンプレート含む）はそこまで苦にはならないと思います。
・制作条件にCSSレイアウトが入っているときに仕事を受けられない。

メリット：
・多くのオーサリングソフトの得意分野ですので、早く作成できる。
　＊オーサリングソフトへの慣れ不慣れの問題もあります

> なのでデザインを変えるときはゼロからやっても何の苦にも思いません。
デザインを変えるときは大概最初から作り直しですので、
CSSレイアウトでページ数が多くても、その点で影響が出ることは少ないと思います。
ブログのようなCMSを使用しているのであれば、デザイン変更の際はスタイルシートだけをいじることになるので、その場合はCSSレイアウト推奨です。

お礼

回答ありがとうございます。
なんとなくですが、だいたい理解できました。
一つ気になることなのですが、
＞＊SEOについては殆どの場合、<meta>のdescriptionで回避できます。
これについてもう少し詳しく教えていただけると助かります。