- 締切済み
headerのセクションを作る場合
headerのセクションを作る場合、classとidでは、どちらで指定すればいいのでしょうか？ <div id="header"> ヘッダの内容 </div><!-- /header --> と <div class="header"> ヘッダの内容 </div><!-- /header --> では、どちらが良いですか？ headerはページ内に１つしかないから、idで宣言すればいいのでしょうか？
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞headerはページ内に１つしかないから、idで宣言すればいいのでしょうか？ ひとつしかないわけないです。HTML5が参考になりますが <body> <header> この記事のheader <nav>サイトナビゲーション</nav> <header> <section id="section1"> 見出し<h1～h6>を一つだけ持つと期待される本文 <section id="section1-1"> 見出し<h1～h6>を一つだけ持つと期待される本文 <article> header,section,footerを持つと期待される完結した記事 <header> </header> <section id="section1-1-2"></section> <footer></footer> </article> <article> <header></header> <section></section> <footer></footer> </article> <aside>本文と直接関係ない記事</aside> <nav id="tableContent">ナビゲーション</nav> </section> <section id="section1-2"> </section> </section> <footer></footer> </body> ・・・・headerは、その記事の集合のheaderなのですから、一つのページ内に何度も登場する可能性があります。 基本的にリンクやjavascriptのターゲットになるとき以外はidは使わないほうが無難です。詳細度が高くなってスタイルシート時に面倒になる。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』のですから、一ページに何度も登場する可能性のあるheaderはclassのほうが適切でしょう。リンクターゲットして一意な要素が必要なら <div class="header" id="TOP">とでもしておけば良い。 将来的にHTMLに書き直すことを念頭において、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )をclass名にして文書構造を示すのが、色々な意味で良いでしょうね。【後述のサンプル】 自動変換ツールでHTML4.01→HTML5にできますし、googleなどの検索エンジンも、それが文書構造を示すclass名と理解してくれているようですから・・。 <body> <div class="header"> この記事のheader <div class="nav">ナビゲーション</div> </div> <div class="section" id="section1"> 見出し<h1～h6>を一つだけ持つと期待される本文 <div class="section" id="section1-1"> 見出し<h1～h6>を一つだけ持つと期待される本文 <div class="article"> header,section,footerを持つと期待される完結した記事 <div class="header"> </div> <div class="section" id="section1-1-2"></div> <div class="footer"></div> </div> <div class="article"> <div clas="header"></div> <div class="section"></div> <div class="footer"></div> </div> <div class="aside">本文と直接関係ない記事</div> <div class="nav" id="tableContent">ナビゲーション</div> </div> <div class="section" id="section1-2"> </div> </div> <div class="footer"></div> </body>
