重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

html の　divとtable　の役割

解決済

  • 質問者：hatokamome
  • 質問日時：
  • 回答数：5件

html の初心者です。
divで箱を作って、画面のレイアウトをしている人が多いようですが、
僕は、tableを使用しています。
tableでほとんど出来ると思うのですは、
divを使う理由は何なのでしょうか。

ご存知の方がいらっしゃられたら教えて下さい。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

　少し長いですが、初心者は絶対に必要な知識ですから、頑張って呼んでくださいね。



　ます、初心者でしたら必ず仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )を読んでおきましょう。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
本仕様書は様々な方法で利用できるだろう。
・最初から最後まで通読する。
　　本仕様書は、HTMLに関する一般表現から始まり、末尾に向けて徐々に技術的で特殊な内容になっていく。
・必要な情報に直接アクセスする。
　　できるだけ素早くシンタクスやセマンティクスに関する情報を得るために、オンライン版の仕様書には次の特徴を持たせた。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［About the HTML 4 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　沢山の有象無象の情報があふれています。その中から正しい情報を得るのは藁の山から針を探すようなものです。最後は仕様書を読むことになります。
　ここに書かれているように、通読してどこに何が書いてあるかを知っておくこと。あとは必要なときに、詳細目次( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )や要素索引( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )を利用して直接情報に進んでも良いでしょう。

　あなたの質問に関わる部分は

DIVの項目を読んでみると
　⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

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

　⇒ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　などでしょうか？？

★HTMLは、ワープロやDTPとは全く異なるものです。(ここを誤解されている)
　文書を読み解き、その文書を構成する要素(部品)に分解して、それぞれがどのような部品--要素であるかをタグを使ってマークアップするメタ言語です。
　<h1>ここはレベル1の見出し</h1>
　<p>ここはひとつの段落で、<strong>ここは重要</strong>です。</p>
　<blockquote>
　　<p>ここは引用文で</p>
　</blockquote>
　<ol><!-- ここから序列リスト -->
　　<li></li>

というふうに、文書の構造をマークアップして、どのようにプレゼンテーションするかは、全く書きません。
　⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　ですから、読み上げソフトは、見出しは太い男声の声で、重要なところは強い言葉で読んでくれますし、検索エンジンにもどこが見出しで、どこが本文でどこが表かが判ります。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　その上で、パソコンのディスプレイ用には、この様にプレゼンテーションするかをスタイルシートで指定すれば良いのです。

＞（画面のレイアウトは)tableでほとんど出来ると思うのです
　は全く間違っています。tableの目的は２次元(以上)のデータを表す要素です。あなたは視角メディアのことしか考えていない。

＞divで箱を作って、画面のレイアウトをしている人が多いようですが、
　これも重大な誤りです。!!!---DIVはデザインのためでは決してありません!!!
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　　・・・もしそのように使われていたら、「している人が多いようですが、」のサイトも間違っています。

＞divを使う理由は何なのでしょうか。
　
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　HTML4.01には、実は文書構造を示す要素(タグ)が不足していました。そのためにDIVに関して上記のように書かれていました。
<body>
　<div class="header">
　　<h1>見出し</h1>
　　・・・ここは文書のヘッダ・・・
　　<div class="nav">
　　　ナビゲーション
　　</div>
　</div>
　<div class="section">
　　<p>・・・ここは本文・・</p>
　</div>
　<div class="footer">
　　<p>・・ここはフッタ>/p>
　</div>
</body>
　のようにDIVを使うのが本来の使い方であるべきです。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
★★ところが、これは理解されたとは言いがたく★★

　あなたが、ご存知のように「divで箱を作って、画面のレイアウト」するような使い方がされてきました。!!!!
<div class="contents"><div class="left_box"><div class="main">とかね。見かけたことあるでしょう。

　その反省から、次期HTML5では、文書をよりよく構造化するために、section,article,aside,hgroup,header,footer,nav,figureなどの要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
　そして、DIVは、「他に適当な要素がないときの最後の手段としてのみ使う」ことになります。
　⇒Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2012/CR-html5-20121217/grou … )
　--著者は、 div 要素を、他に適切な要素がないときなど、最後の手段として使うことを、強く推奨する。---

　たとえば、よく引き合いに出すのですが・・
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　のソースは、全くシンプルですが、ブラウザの[表示]メニューから[スタイルシート]に進みスタイルシートを選択すると様々にデザインが変わります。ウィンドウサイズを変化させても追随します。印刷プレビューで見ると印刷用に変わります。この様なことはtableでHTMLが作成されていたら、決して出来ませんね。
　
　
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。
勉強課題になりました。
方針つかめとても嬉しいです。＾＾

通報する
お礼日時：2013/07/06 21:14

No.5

  • 回答者： mogeraccho
  • 回答日時：

専門的な回答は他の皆様がやられているので、個人的意見をば。



・tableタグは「表」をデザインするもの。
・divはスタイルを指定するもの

というイメージです。
初心者ならば、divをあまり気にする必要はありません。
おっしゃるとおり、tableでほぼ実現出来ます。

しかし、そのうち「ああ、この書き方では無駄が出る」「この書き方だとソースコード（HTMLで書かれた物）が見難い……」なんて思い始めることでしょう。
それが成長ですね。

一歩踏み出して「CSS」と呼ばれるものに手を出してみましょう。
ここからが、「div」さんに有り難みを感じ始める時です。
もしかしたらCSSより先に、JavaScriptに興味が向くかも知れません。
同様に「div」さんにありがたみを感じると思います。



▽　以下、少し詳しく（少し難しくなってきます）　▽

例えば、「見出しを作りたい！」なんて思うとしましょう。
その見出しは目立たせなくてはいけません。
そして複数作らないといけない場合、いちいち

<table border="1"><tr><td><font size="7" color="#ff0000">見出し1</font></td></tr></table>
<table border="1"><tr><td><font size="7" color="#ff0000">見出し2</font></td></tr></table>
<table border="1"><tr><td><font size="7" color="#ff0000">見出し3</font></td></tr></table>
<table border="1"><tr><td><font size="7" color="#ff0000">見出し4</font></td></tr></table>
<table border="1"><tr><td><font size="7" color="#ff0000">見出し5</font></td></tr></table>
・
・
・

な～んて書いてたら、ゴッチャゴチャになりますよね？
そんな時に役に立つのがCSSと呼ばれるものです。

一箇所に文字の大きさやら背景色やらを定義しておきます。

<style type="text/css">
<!--
.topic{
COLOR: #ff0000;
FONT-SIZE: 20px;
}
-->
</style>

そしてdivさんにお願いします。

<div class="topic">見出し1</div>
<div class="topic">見出し2</div>
<div class="topic">見出し3</div>
<div class="topic">見出し4</div>
<div class="topic">見出し5</div>
・
・
・

ほら、少しはスッキリしたのではないでしょうか。
こんな感じで使えます。

No.2さんなどとかぶってしまったかな？＾＾；
    • good
    • 3
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。
具体例でわかりやすいです。
この質問、解決しました。

mogeracchoさん
皆様、ありがとうございました。＾＾

通報する
お礼日時：2013/07/06 21:16

No.4

  • 回答者： tanuhei
  • 回答日時：

先の回答にもありましたが、tableタグは表の作成の為のタグです。

ただ、CSSが現在の様に広く使われるまではレイアウト目的で多用されていました（テーブルレイアウトという言葉さえあります）。例えばですが、ホームページビルダーの「どこでも配置モード（？）」などもHTMLソースを見るとテーブルレイアウトで生成されるのではないかと思います。きっとhatokamomeさん以外でも、『初心者』から少しずつ理解が深まってくると誰でも感じる疑問だと思います。
なんだか話がずれて行くので戻しますが、divでボックスを作ってCSSでレイアウトしていく方が多い理由は、大体下の様な事ではないかと思います。

■現在、ページの内容部分（文章など）はHTML、デザインはCSSで…と推奨されている。
■tableタグだとHTMLソースがやたらと長くなる。
■より緻密でデザイン性の高いレイアウトがしやすい。
■ソースが見やすくメンテナンスしやすい。

今では私も『手打ち』でtableタグは、辛くて書いてられません（汗）。
それと、今はあまり言われなくなりましたが、昔は検索エンジンのクローラーがソースが長いと一番下まで見に行ってくれないなんて言われてまして…まあ、これは現在も検索エンジンは進化し続けていますし、ソースが2～3000行もある大規模なページもありますので何とも言えませんが、SEO（検索エンジン対策）の面からも皆さん少しずつテーブルレイアウトから移行していったのでは？と思います。
    • good
    • 3
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。
明快で、わかりやすい解答でした。＾＾
ありがとうございます。

通報する
お礼日時：2013/07/06 21:15

No.2

  • 回答者： Ogre7077
  • 回答日時：

CSS が普及していない昔は table 要素しかなかった訳ですが、


現在は以下の三点を理由として div とかその他諸々でレイアウトをします。

○ Web アクセシビリティ
日本の工業規格(JIS X 8341-3)にもなっていますが、Web は健全者でなくても使いやすい配慮が求められます。
具体的には、視覚障害者が使う音声ブラウザなら、table 要素をデータと見なして「表の一行目～」と読み上げる実装が考えられますので、データ以外の目的で table を使わない等です。

○ セマンティック Web
HTML をデータ交換の手段として再活用するため、データの意味を明確に記述すべきという考え方です。
具体的には、見出しには h1 要素、段落には section 要素、広告には aside 要素、数表には table 要素というように、データの意味ごとに使う要素を使い分ける等です。

○ SEO 効果
上記の二つを心がけると、検索エンジンは意味のあるデータを探し出しやすくなり、ページ評価が上がると期待されます。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。
セマンティック Web参考になりました。＾＾

通報する
お礼日時：2013/07/06 21:13

No.1

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



tableタグは表を作るタグであり、レイアウト用に使うタグではないからです。

ようはきちんと用途に合ったタグでマークアップしましょうということでしょうか。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。

通報する
お礼日時：2013/07/06 21:11

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報