No.3ベストアンサー
- 回答日時:
少し長いですが、初心者は絶対に必要な知識ですから、頑張って呼んでくださいね。
ます、初心者でしたら必ず仕様書( 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の目的は2次元(以上)のデータを表す要素です。あなたは視角メディアのことしか考えていない。
>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が作成されていたら、決して出来ませんね。
No.5
- 回答日時:
専門的な回答は他の皆様がやられているので、個人的意見をば。
・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さんなどとかぶってしまったかな?^^;
ご回答ありがとうございました。
具体例でわかりやすいです。
この質問、解決しました。
mogeracchoさん
皆様、ありがとうございました。^^
No.4
- 回答日時:
先の回答にもありましたが、tableタグは表の作成の為のタグです。
ただ、CSSが現在の様に広く使われるまではレイアウト目的で多用されていました(テーブルレイアウトという言葉さえあります)。例えばですが、ホームページビルダーの「どこでも配置モード(?)」などもHTMLソースを見るとテーブルレイアウトで生成されるのではないかと思います。きっとhatokamomeさん以外でも、『初心者』から少しずつ理解が深まってくると誰でも感じる疑問だと思います。なんだか話がずれて行くので戻しますが、divでボックスを作ってCSSでレイアウトしていく方が多い理由は、大体下の様な事ではないかと思います。
■現在、ページの内容部分(文章など)はHTML、デザインはCSSで…と推奨されている。
■tableタグだとHTMLソースがやたらと長くなる。
■より緻密でデザイン性の高いレイアウトがしやすい。
■ソースが見やすくメンテナンスしやすい。
今では私も『手打ち』でtableタグは、辛くて書いてられません(汗)。
それと、今はあまり言われなくなりましたが、昔は検索エンジンのクローラーがソースが長いと一番下まで見に行ってくれないなんて言われてまして…まあ、これは現在も検索エンジンは進化し続けていますし、ソースが2~3000行もある大規模なページもありますので何とも言えませんが、SEO(検索エンジン対策)の面からも皆さん少しずつテーブルレイアウトから移行していったのでは?と思います。
No.2
- 回答日時:
CSS が普及していない昔は table 要素しかなかった訳ですが、
現在は以下の三点を理由として div とかその他諸々でレイアウトをします。
○ Web アクセシビリティ
日本の工業規格(JIS X 8341-3)にもなっていますが、Web は健全者でなくても使いやすい配慮が求められます。
具体的には、視覚障害者が使う音声ブラウザなら、table 要素をデータと見なして「表の一行目~」と読み上げる実装が考えられますので、データ以外の目的で table を使わない等です。
○ セマンティック Web
HTML をデータ交換の手段として再活用するため、データの意味を明確に記述すべきという考え方です。
具体的には、見出しには h1 要素、段落には section 要素、広告には aside 要素、数表には table 要素というように、データの意味ごとに使う要素を使い分ける等です。
○ SEO 効果
上記の二つを心がけると、検索エンジンは意味のあるデータを探し出しやすくなり、ページ評価が上がると期待されます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
誕生日にもらった意外なもの
みなさんがもらった誕生日プレゼントで面白いものがあったらぜひ教えてください!
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え
ホームページ作成・プログラミング
-
divの中にtableを入れていますが、table width=150"が有効になりません"
HTML・CSS
-
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
携帯サイト、ナノでのタグ編集...
-
IEで表示されてしまう余白をな...
-
オシャレな区切り線はありませ...
-
div要素が重なってします
-
開始タグと終了タグについて
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
HTMLのJIS規格について
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
グリッドレイアウトで"auto-fit...
-
Macで画像の切り抜きできないの?
-
【ヒトの神秘】美男美女から何...
-
ウインドウを小さくするとbody...
-
htmlの文字が縦書きになる
-
CSSのクラス名・ID名の指定でワ...
-
スクロールボックスを中央に配...
-
隙間をなくすには?
-
<h1>、<h2>と<p><div>の行間を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報