- ベストアンサー
htmlの記述に関する質問
- ホームページに3つのコンテンツを用意する際、タグの種類ごとに書き、css(absolute)でレイアウトを整えるのは問題があるのでしょうか？
- 他の人のソースでは1つのコンテンツについて集中的に書かれているが、タグの種類ごとに書くことが問題ないか教えてください。
- htmlの記述において、コンテンツをタグの種類ごとに分けて書き、レイアウトを整える方法について教えてください。
- trip-trip-trip
- お礼率100% (16/16)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞のようにdivは使わずに書いています。 それは、文法的には間違いではありません。しかし、仕様書には下のように書かれています。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 『次の例は、見出しとそれが導くテキストとをDIV要素で連結する方法を示している。こうすることで、スタイルシートによってセクション単位のスタイル定義(背景色やフォント設定等)を行うことができる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.5 )』 このあたりを読むと、DIVの本来の使い方が詳しく示されています。 ところが、これらの文章は仕様書のすべてを理解している人ならともかく、そうでない多くの人には読み飛ばされてきました。その反省からHTML5では、『文書をよりよく構造化するために、次の要素が新しく追加されました。 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』 ・・section・article・aside・hgroup・header・footer・nav・・・ これらは、HTML4.01で想定していた『『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する』のidやclass名です。 <div class="section"> <h2>1つ目のセクションのタイトル</h2> <div class="figure"><img src="1つ目のセクションの画像"></div> <p>1つ目のセクションの文章</p> </div> <div class="section"> <h2>2つ目のセクションのタイトル</h2> <div class="figure"><img src="2つ目のセクションの画像"></div> <p>2つ目のセクションの文章</p> <div class="section> <h3>項見出し</h3> <p></p> </div> <div class="section> <h3>項見出し</h3> <p></p> </div> </div> <div> <h2 class="">3つ目のセクションのタイトル</h2> <div class="figure"><img src="3つ目のセクションの画像"> <p>3つ目のセクションの文章</p> </div> こうしてセクションごとにdivで括ってあると、スタイルシートで章番号や項目番号を振ることができます。 --レンダリング結果------------------------------- 一章 1つ目のセクションのタイトル 1つ目のセクションの文章 ■画像 二章 2つ目のセクションのタイトル 2つ目のセクションの文章 ■> 二章1項 項見出し 記事 二章2項 項見出し 記事> 三章 3つ目のセクションのタイトル 3つ目のセクションの文章 ■ ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで、スタイルシートのcounterを使ってます。 このように、文書構造を補完する目的でDIVを適切に利用するとHTMLもスタイルシートもわかりやすくなります。たとえば div.section div.section{font-size:0.95em;} とするとスタイルシートを読むだけで、章→項→小項と下がるたびにフォントサイズを少しずつ小さくなるように指定してあることが一目瞭然ですね。
お礼
またまた丁寧な回答ありがとうございます。 HTMLを覚えるよりも、HPを作成することを 考えていたため、基本的なことをとばしていた感じがします。 回答の中の例文を見てみると、非常にわかりやすかったので これからはしっかりと勉強をしながらやっていこうと思います。 ２度の回答ありがとうございました。
- notnot
- ベストアンサー率47% (4903/10364)
HTMLはコンテンツの構造を反映した形で記述します。 コンテンツがいくつかあって、個々のコンテンツごとに、タイトルとか画像とか説明文という属性があるわけなので、後者が自然です。 前者の書き方は間違っていると言っても言いすぎでは無いでしょう。 構造を反映して記述しておくと、仮にブラウザがCSSファイルの取得を失敗しても、レイアウトが崩れるのはしょうがないとして、内容を把握できるというのもありますね。
お礼
回答ありがとうございます。 確かに、コンテンツとして僕の書き方（前者）は 不自然ですよね。
お礼
丁寧な回答ありがとうございます。 HTMLのことについてもよくわかりました。 ORUKA1951さんの回答で <div class="section"> <h2 class="">1つ目のセクションのタイトル</h2> <div class="figure"><img src="1つ目のセクションの画像"></div> <p class="">1つ目のセクションの文章</p> </div> とありますが、 僕はいつも <h2 class="">1つ目のセクションのタイトル</h2> <img src="1つ目のセクションの画像" class=""> <p class="">1つ目のセクションの文章</p> のようにdivは使わずに書いています。 やはり、１つのコンテンツのブロックということを divで表記しているのでしょうか？ 僕のこのやり方や考え方は間違いでしょうか？ 追加の質問で申し訳ないですが、回答お願いします。