- ベストアンサー
テーブルでデザインするのはよくないのですか
- テーブルを利用したページレイアウトの調整は好ましくないとされています。
- テーブルの使用はSEOに悪影響を及ぼす可能性があります。
- 代替手段を使用することで、よりモダンで柔軟なデザインを実現できます。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
＞考え方の問題といえば、そうかもしれませんが奥が深いです。 そうなったら宗教になってしまう。「信じなさい」になってしまう。 そのために仕様書があるのです。 「何が何でも、tableを使っちゃダメ」それは「こんな問題があるから」ではなくて、 『もっぱらレイアウトの目的でtableでマークアップしてはならない』 です。意味が随分と違います。 それだけです。一言一句正確に 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［11.1 Introduction to tables( http://www.w3.org/TR/html401/struct/tables.html#h-11.1 )］より 下手な翻訳ですが・・ ＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから 非視覚的メディアがレンダリングするときに問題を起こす可能性があるため、文書をレイアウトするの目的のためだけテーブルを使わないでください。さらに、画像とともに使用すると、大きなディスプレイを搭載したシステムで設計されたテーブルをユーザーが表示するには、常に水平方向へのスクロールを強制される。これらの問題を最小限に抑えるために、著者らは、レイアウトをコントロールするため、テーブルではなくスタイルシートを使用するべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで これはたとえ表であっても画像を含むときは、表ではなく（他のマークアップをして）スタイルシートでレイアウトを調整すべきとも読み取れますね。
その他の回答 (6)
- ponpokona-
- ベストアンサー率40% (313/780)
あと、 テーブル内のすべての要素を読み込むまで表示しないので、体感速度が遅い。 というのもあったような・・。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
長文失礼。 >また、例え該当しても、どの程度の好ましくないのでしょうか。 あのサイトはテーブルレイアウトを使ってるぞ、と、悪い噂が立つ可能性があります。 制作関係者以外でソースコードをいちいち調べる人がどれほどいるのか知りませんが。 私は、どんなものも使い方次第でよくも悪くもなると思いますけどね。 フレーム然り、CSSレイアウト然り、Flashサイト然り。 ---------------------- 文法的な話をするならすでに他の方が書かれている通り、 テーブルはテーブルを書くための物です。 文書構造の問題について。 ・解析ツールを使って解析すると、適切に解析できなくなる可能性があります。 、、、誰が解析するんでしょうか。 <li><img></li>と<td><img></td>がどのように変わるのか、私にはわかりません。 箇条書きと解析されるかわりにテーブルと解析されたら問題になるとは、とても思えません。 <p>でも<figure>（HTML5）でも同じ。 ・解析ツールの一種、検索エンジン絡みでSEOについて 不利になると言われていますが、どれほど不利なのかわかりません。 HTMLタグとは別の部分で十分挽回できると思いますし、 テーブルレイアウトからCSSレイアウトに切り替えたら、逆に順位が下がる事もあります。 表示上の問題について。 ・段組み表示を小さな画面で見れば、ウインドウが分割されますので本文の領域が狭くなります。 フレームで言われていた問題です。 CSSレイアウトでサイドバーを作っても同じですので、テーブルレイアウトだけの問題ではありません。 ・左右スクロールが発生する事があります。 CSSでwidthやpositionを指定すれば左右スクロールになりますので、テーブルレイアウトだけの問題ではありません。 ・テキストブラウザはテーブルの表示が苦手ですので、大きなテーブルは表示が乱れる可能性が高くなります。 必ずと言っていいほど大きなテーブルになるレイアウトテーブルは、確かに問題だと思います。 ですが今回の場合のような、画像（のalt属性があれば）と解説文だけで表示が乱れるブラウザは、むしろブラウザがバグってると思います。 ・音声ブラウザや携帯電話は<td>を<div style="float:left">と同じ扱いにします。 「すべてのブラウザで同じデザインを」という芸術家気質であれば、左右に並ばないのは重要な問題かもしれませんが、 小さな枠に大きな物は入りません。 CSSレイアウトにしたところで、左右に並ぶ事はありません。 あきらめてください。 ・レイアウトの切り替え（デザイン更新）が大変（といわれている） <td>から</td>の間が長いから、区切りを探すのが大変ってことなんでしょうけど、<div>にしたところで、やることは同じです。 スタイルシートのfloatやpositionを変更すると、ブラウザごとの調整が大変だったりするので、それに比べればテーブルレイアウトの方が簡単な事もあります。 ---------- HTML5にはこう書かれています。 http://dev.w3.org/html5/spec/tabular-data.html#table-layout-techniques >Good table layout is key to making tables more readable and usable. 訳しにくいのですが、、、 テーブルレイアウトをうまく使うと、テーブルが読みやすく使いやすくなるキーとなる。 こうも書かれています。 >Authors are encouraged to use CSS to achieve these effects. 著者はこれらの表示をCSSを使って行う事を推奨される。 ---------------- 良くないと言われているのは、文法における論理の問題が大きいからだと思います。 <marquee>のようなものであれば未対応ブラウザで<span>や<div>と同じになる、つまり表示が全く変わってしまいますが、 テーブルレイアウトはそういうことではなく、一種の哲学だと思います。 まあ、私には最初に書いた風評も結構気になるんですけどね。（気にするだけで対策してるのかというと、そうでもなかったりする。） ○○ブラウザで表示が、、、というのなら、それ用のページを作ればいいと思います。 本来のWeb標準は１つのHTMLファイルですべてのブラウザに対応する事ですが、 携帯サイト、スマホサイト、PCサイト、わざわざ振り分けて（または切り捨てて）まで特殊なHTMLで作ったりするようなこの時勢に、 音声ブラウザ１つ増えたところで、（振り分けにしても切り捨てにしても）何も変わりはしないと思います。
お礼
ご回答有り難うございます。 なるほど、業界の方々で悪い噂が立つ可能性があるのですか。 風評被害と仰られていますが、肯定的の捉えている場面もあるのですね。 特にCSSより調整が楽という部分には驚きました。 レイアウト的には単純な左右２画面構成の連続なので 実はあまり検討の余地がないのかもしれませんね。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
テンプレート通りに記述してくれるソフト - HTML - 教えて！goo ( http://okwave.jp/qa/q6991763.html ) に関連した質問ですね。 ★内容次第です。たとえば、 |物件名 |写真|品番|価格|説明 と縦に並ぶデータでしたら、表で構わないでしょう。 重要なことは ______________________ 「ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」 それが表であれば、表でマークアップしても構いません。その場合、一般的に表には第1行、第1列には項目が並びます。(その項目をブラウザに表示させるかさせないかは別問題です。)そのため、何列目の何行目には、どの項目のどの情報があるかが明確に解ります。あまり使われているページを見かけませんが、 <table summary="何とかの表"> <thead> <tr> <th abbr="番号">No.</th><th abbr="写真">写真</th><th abbr="説明">説明</th> </tr> </thead> <tfoot> <tr> <th abbr="番号">No.</th><th abbr="写真">写真</th><th abbr="説明">説明</th> </tr> </tfoot> <tbody> <tr> <td>1</td><td><img></td><td><p>段落</p></td> </tr> ・・・【中略】・・・ <tr> <td>100</td><td><img></td><td><p>段落</p></td> </tr> </tbody> </table> と言うような長大な表があると、印刷すると各ページの表ににtheadとtfootの内容が印刷されます。 ★HTMLの仕様書をぜひ一度目を通されることをお勧めします。仕様書は「どの要素」には「どの要素」を含められるかとかだけではなく、文書を構成する要素の目的が書かれています。これは機械的なValidatorではチェックしようがないものです。 たとえば、 ▲(リスト))HTMLは著者に対して、リスト情報を指定するための幾つかのメカニズムを提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#h-10.1 ) ▲(引用)BLOCKQUOTE要素は長い引用 (ブロックレベル内容) を示し、 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.2.2 ) ▲(DIV要素とSPAN要素)は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) ▲(表)HTML表モデルにより、著者は、テキスト、整形済みテキスト、画像、リンク、フォーム、フォームのフィールド、別の表などのデータを、コマの行と列とに配置することができる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) さらに、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より とも書かれています。 すなわち、その際の質問では「現在、テーブルでページレイアウトを整えています。」という質問でしたから、「『単に文書を整形する目的のためだけに』使われているなら、間違いだ」ということです。 ページレイアウトは、HTMLを書くときに考えないで、ひたすら、その文書を構成する要素(Element)---ヘッダー、フッター、本文、引用文、リスト、重要単語、見出し----のどれにあたるかを判断して、最適なマークアップをしてください。そうすることで、HTMLの本来の目的。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より に適合させることが出来ます。 ★それこそが、ウェブ標準なのです。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ その一塊の情報が、あなたが作成されているひとつの文書の中でどういう構成要素に該当するかは、ここで回答している誰にもわかりません。それは著者であるあなたにしかわからないのです。ですから、その質問の答えは決められません。 ただ、どのようにマークアップされようと、期待されるレイアウトは可能です。なぜなら、HTMLが正統なものだからです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より 具体的に言うと、 <div class="article"> <p><img></p> <p>説明</p> </div> だろうが、 <ul> <li><img></li> <li>説明</li> </ul> だろうが、 まったく同じ外見にレイアウトできるのですよ。 補足＞divは、「文書に構造を付加するため」ですから、<div class="header">とか<div class="section">とかのはずです。よく見かける<div class="container">とか<div class="left">とかは、文法的には正しくとも仕様書の意味からはおかしい。
お礼
たびたびのご回答有り難うございます。 予想外に色々な意見が寄せられて驚いているところです。 新しい発見も幾つかあり勉強になりました。 考え方の問題といえば、そうかもしれませんが奥が深いです。
- yui56544
- ベストアンサー率69% (85/123)
テーブルでデザインをくみ上げることは、現在オーソドックスなルールでは推奨されていません ＃1・＃2の方の申される、音声ブラウザ・アクセスアップなどに適さないという点が大きな理由です。 現在のルールでは、テーブルは所謂「データ表」としてブラウザに認識されているため。 しかし、アクセスアップは必要ない、視覚障害者を対象としていない（例えば写真展示サイト）などであれば、然したる不都合はありません。 強いてテーブルレイアウトの欠点を上げるのであれば、２つ。 (1)リニューアルがしにくいという点 例えばこういうレイアウトの場合 ｜画像｜説明文説明文｜ テーブルレイアウトだと大規模なリニューアルを行おうと思ったときに、HTML全てを書き換える必要がありますが、CSSレイアウトの場合は、CSSを操作するだけでサイト全体のデザインを簡単に変更することができます。例えば、画像の周りに文章を回りこませたり、画像と説明文の位置を逆転させたりということが容易にできるのがCSSレイアウトのメリットです (2)携帯端末・Ipadなどの小画面端末での閲覧がしにくい テーブルレイアウトは、画面の横幅が足りない場合、閲覧者がどんな設定をしたとしても画面外に表示されます 説明文を見るために、いちいち横スクロールしなければいけないのでとても閲覧しにくいです ですが、CSSレイアウトの場合は、閲覧者がブラウザの設定を変えるだけで説明文を画像の下に移動させたりすることが可能なので、横スクロールさせるなどの不便がなく、快適に閲覧することができます 今後、小画面端末でのWEB利用者が増える一方となるので、長い目で見ればCSSレイアウトの方が閲覧者に優しいのは確かです。
お礼
ご回答有り難うございます。 視聴者対策以外の利点もよく分かりました。 プロジェクト開始まではもう少し余裕があるので、 今一度議題として提唱してみます。 やはり視聴障害者対策が主題では変更を提案しても、 まず通りませんので。
- DrFell
- ベストアンサー率55% (305/551)
よくないことがわかっていても、弱者は切り捨ててOKというお考えでしょうか？力いっぱい、絞ったターゲットにサイトを提供するというのも1つの考え方だと思います。それは、それでOKです。 Web標準はどんな環境にも、最低限の情報は伝えられることを目指しています。#1さんは目の見えない方を例に挙げられましたが、ロボットはどうでしょう？ロボットというのは、googleやYahooの検索したら出てくるサイトをくるくる回って、情報を集め、順番をつける等、Web上でいろいろな役割をしています。 ロボットも目の見えない人と同じくらいの障害力があるといわれています。つまり、文字が何色で書かれていても、文字を大きくしても関係ない。レイアウトや配色、背景画像や見た目の雰囲気なんて解さない。画像の中に、文字がはっきり読める形で写っていても全く読めない。などです。 それではどうすれば伝わるか？Web標準にしたがって、文字を大きくしたり色を変える際には、強調を意味する<strong>をつける。見出しには<h1><h2><h3>を使い、表は表で組むが、表で無いものには表を使わない。すると、目の見えないひとが使っている、音声ブラウザなどは、他と区別しながら、読み上げ、検索ロボットも、文脈を、大見出しの下の中見出しの中のこんな言葉なんだ。関係性が深いんだなぁとか、重要なキーワードになるんだなとか理解します。 Web標準に沿ったタグを使うだけで、情報が正しく伝わり、コンテンツは検索エンジン上でも不利にならずに評価されるでしょう。目の見えない人なんてどうでもいいんだよっ！自分だけの環境で自分の好きなように、とりあえず見えればOK！だと、検索エンジンのロボット君には理解しがたいサイトになり、推薦はしてもらいにくくなるでしょう。検索上位を目指さなければ、弱者切捨て大いに結構です。ただ検索エンジンという強者からは、あなたのサイトは実力より低く評価される可能性が高いです。だって情報が伝わらないんだから、しかたないですよね。 情報弱者は切り捨ててOKという考えなら、なんの問題もないです。たいしたこと無いのでどんどん切り捨ててください。むしろ、当たり前の配慮もないサイトが上位表示されたら大迷惑です。どんどん切り捨ててください。（Web標準にしたら順位が上がるといっているわけではありません。お間違えのないように）
お礼
なんかやたらと弱者切り捨てを強調していますが、 私が冷酷な人間だとでも言いたいのですか。 喧嘩を売る方が定期的に沸いて来ますが何なんですかね。 これだけ力作の文章を書いて頂けるのだから、 そんな突っ慳貪な言い方をしなければ素直に感謝するのですが。
- suzuko
- ベストアンサー率38% (1112/2922)
う～ん。 確かに「テーブルをページレイアウトに利用している」に当たりますね。 Web標準というのをご存知でしょうか？ 代表的な団体はW3Cなのですが、そこが出している「このタグはこういう目的で使いましょう」という指針の中に、「テーブルタグは表として使う」とあります。 ですので、画像があってその横に説明文と言うのは「表です」とは言いにくいと思います。 そして、このWeb標準の意義は「あらゆるプラウザで、発信者の意図とおりにサイトを表示する」事を目的としています。 ですので「テーブルをページレイアウトに利用する」と音声読み上げタイプのプラウザでは、きちんと読み上げられず、音声読み上げタイプのプラウザを利用する視覚障がい者の方には、発信者が意図しない情報になってしまうことがあります。 >絶対に止めるべきとか、そんなに神経質になる必要はないのか。 これはあなたの作成したサイトへの利用者の層によるとは思います。 まったく写真ばかりのサイトならば、視覚障がい者の方がたくさん利用するとは思えませんが。 もし「視覚障がい者の方にも来てほしい」と言うのならば、配慮される方がよいとは思います。
お礼
ご回答有り難うございます。 障害者に優しくないから好ましくないというのが真の理由なのですか？ それならば躊躇する理由には該当しないのですが。 もっと決定的な欠陥があるのかと思っていました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ご返事が大分遅くなりました。 方針として大分見直されることになりました。 意外とテーブルを使っているところが多かったものですからｗ