ベストアンサー

htmlでdivをなるべく使わないで

2013/01/24 20:19

書く方法ってありますかね？もちろんゼロとはいいませんが、使うとしても４～５コ程度に抑えたいのです。どうも</div>って書きまくって、見てみたら不備があり無用なdivを見つけるのに苦労しました。別な人からもなるべく多くは使わない方がいいと言われまして、しかし、画像とかを挿入する際に h1,h2,h3,h4・・・・とやるのは上手くないとお聞きしましたので、どうすればよいかなと思いまして回答お願いします。それとセクション要素もたくさん使うのですが、これら一覧が載っているサイトあればお願いします。

GNseravee
お礼率1% (1/58)

HTML
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/01/25 09:27 回答No.1

　一言で説明しきれないのでリンクを含めて書きます。リンク先も読んで理解してください。まず、HTML4.01の仕様書を最初から最後まで流し読みしてください。ついでHTML4.01からHTML5への変更点を読むと良いでしょう。　⇒HTML 4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) 　⇒HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff ) 　「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」　「HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」　このふたつの文章が意味するところは、divは、「文書構造を補完するために使用する」のだが、抽象的で理解されなかったために「新しく文書構造を示す要素が追加された」と言う意味です。　HTML4.01は、それ以前のHTMLで『著者はまた、表や画像を、ページレイアウトのための道具に流用していた。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.5 )』『そのためのテクニックには思わぬ副産物があった。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』への反省から、作られたものです。　HTMLは、「どんな環境からもWebの情報を利用できるようにすべき( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」であるはずが、そうでなくなってしまったためにHTML4.01が策定されたのでしたね。　視覚ブラウザでなくても、どこがその文書のヘッダであり、どこが本文であり、どれが表で、どこが引用で、どこが見出しであるか・・・が理解できるようにマークアップすべきです。言い換えれば、HTMLで文書の構造を記述し、スタイルシートでプレゼンテーションを指定する『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』ということです。＞ htmlでdivをなるべく使わないで書く方法　という時点で、DIVの乱発とまったく同じ発想であることに気付いてください。　　　　　　　　　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 　私は、最近では次のようにマークアップすることが多いです。 <body> 　<div class="header"> 　　<h1>タイトル</h1> 　　<div class="nav"> 　　　目次　　</div> 　<div class="section"> 　　<h2>本文見出し</h2> 　　<p></p> 　　<div class="section"> 　　　<h3></h3> 　　　<p></p> 　　　<p></p> 　　　<div class="note"></div> 　　　<div class="figure"></div> 　　　<div class="aside"></div> 　　</div> 　　<div class="section"> 　　　<h3></h3> 　　　<div class="aside"></div> 　　</div> 　</div> 　<div class="footer"> 　</div> </body> 　一目見て、文書構造が分かります。HTML4.01では文書構造を示す要素が足りなかったためにclassやidをつけたdiv要素で文書構造を示しています。これがHTML5だと <body> 　<header> 　　<h1>タイトル</h1> 　　<nav> 　　　目次　　</nav> 　<section> 　　<h2>本文見出し</h2> 　　<p></p> 　　<section> 　　　<h3></h3> 　　　<p></p> 　　　<p></p> 　　　<div class="note"></div> 　　　<figure"></figure> 　　　<aside></aside> 　　</div> 　　<section> 　　　<h3></h3> 　　　<aside"></aside> 　　</section> 　</section> 　<footer> 　</footer> </body> となるでしょう。DIVを使う機会は大幅に減るでしょうね。しかし、DIVを減らすために書いているのではありません。　文書構造を示す要素がない場合はDIVを(idやclassとともに)使って構造化する事が必要なことは変わりません。＞画像とかを挿入する際にh1,h2,h3,h4・・・・とやるのは上手くない　その画像が本文から参照される挿絵的な要素でしたら <div class="figure"> 　　<h3 class="figcpation">図1</h3> 　　<img src="" width="" height="" alt=""> </div> 　とされるでしょう。それが見出しでしたら <h1><img src="" width="" height="" alt="何とかのページ"></h2> 　とマークアップされて良いでしょう。・・・ただしこの場合、画像に背景以上の意味がないなら <h1>何とかのページ</h2> 　としてスタイルシートで背景をしてするほうが適切でしょう。＞これら一覧が載っているサイトあればお願いします。　それがないのは理解できると思います。確実なのは仕様書を読んで、それぞれがどのような意味を持ち、どこに使われるかを知っておくこと。そのためには全体を通読して概略を理解して、ここはどの要素でマークすればよいかを都度チェックすることです。　⇒7.5.5 見出し: H1、H2、H3、H4、H5、H6要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-H1 ) 　　「見出しの要素は、その章・節で述べられる話題を短く記すものである」　高々、数十個の要素(タグ)です。すぐ覚えちゃいますよ。＞無用なdivを？？ <div class="memo important"> 　<p> 　　プレゼンテーション(スタイルシート)で使うが使うまいがに関わらず、文書構造をメモしておきたければ、書いておくべきです。　</p> </div> 　というふうにね。無用かそうでないかはその時点では分かりません。 ★wrapper とか contentとか left-menueとかのclass,id名は、おかしいですね。