- ベストアンサー
divタグの名前の付け方
基金訓練でWeb制作をしていて、今、ドリームウィーバー(以下、Dw)で自分で作ったWebページのレイアウトを組んでいます。 やっていて疑問に思ったのですが、container、menu、containts、footer・・・有名なものは全て使ってしまったのですが、この他にdivタグをつけたい文章のかたまりや画像などが10個以上(フロートをかけたいので)あります。どのような名称をつければ良いのでしょうか？いくつか省略化(Dwのdivタグ挿入のところ)したものをそのまま名称にすれば良いのでしょうか・・・
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
divやspanについては仕様書に記述があります。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素・【中略】・は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より 本来は文書の構造を示すためのものです。残念ながらHTML4.01strictでは、それ以上の具体的な指定や例がなく、様々なclass名が使われてきました。(仕様書をろくに読んでないことが原因でしょうが) HTML5ではその反省から、多く使われてきた(日本で普及していたものとは違う)、文書構造を示すclass名が、文書構造を示し、かつセマンティックな(意味を持つ)要素として独立します。すなわち、従来も【まともな】HTMLなら <body> <div class="header"><!-- header"> <h1>見出し</h1> <div class="nav"> <ol> <li><a href=""></a></ol> <li><a href=""></a></ol> </ol> </div> </div> <div class="section"><!-- 本文(章) --> <div class="section"><!-- 本文(項) --> <h2>見出し</h2> <p>記事</p> <div class="figure"><!-- 挿絵・補足記事 --> </div> </div> <div class="section"><!-- 本文(項) --> <h2>見出し</h2> <p>記事</p> <div class="figure"><!-- 挿絵・補足記事 --> </div> <div class="aside"><!-- 余談(本文と直接関係ない記事) --> </div> </div> </div> <div class="footer"><!-- フッター --> </div> </body> と、文書構造を示すためにclass名に書かざるを得なかったものが・・ <body> <header><!-- header"> <h1>見出し</h1> <nav> <ol> <li><a href=""></a></ol> <li><a href=""></a></ol> </ol> </nav> </header> <section><!-- 本文(章) --> <section><!-- 本文(項) --> <h2>見出し</h2> <p>記事</p> <figure><!-- 挿絵・補足記事 --> </figure> </section> <section><!-- 本文(項) --> <h2>見出し</h2> <p>記事</p> <figure><!-- 挿絵・補足記事 --> </figure> <aside><!-- 余談(本文と直接関係ない記事) --> </aside> </section> </section> <footer><!-- フッター --> </footer> <body> と要素として書けるようになります。 ★HTML4.01でも、私が使うclass名はこのくらいのもので、あとは <div class="memo"><div class="section summary">くらいのもので、相当大きなサイズのHTMLでも、class名は10個行かない。 containerとかcontaints、wrapperとかは、文書構造上の意味が少ないため、まず使いません。 「この他にdivタグをつけたい文章のかたまりや画像などが10個以上(フロートをかけたいので)あります。」 それはいくつあっても関係ありません。floatスタイルを適用させたい要素は、ある集団ですから、上の例で行くと div.section div.figure{float:left;} で済みますし、アルバムのようにたくさんのブロックをfloatさせたければ、 <div class="album"> <ol> <li><img> <ul> <li>10月30日/li> <l>どこそこで</li> </ol> </li> <li><img> <ul> <li>10月30日/li> <l>どこそこで</li> </ol> </li> </ol> div.album ol,div.album ol li{display:block;list-style:none;margin:0;padding:0;} div.album ol li{float:left;width:20%;} div.album ol li ol li{float:none;width:100%;} ですむ。class名を一つ一つつける必要はありません。極端な話 <body> <div><!-- header"> <h1>見出し</h1> <div class="nav"> <ol> <li><a href=""></a></ol> <li><a href=""></a></ol> </ol> </div> </div> <div><!-- 本文(章) --> <div><!-- 本文(項) --> <h2>見出し</h2> <p>記事</p> <div class="figure"><!-- 挿絵・補足記事 --> </div> </div> <div><!-- 本文(項) --> <h2>見出し</h2> <p>記事</p> <div class="figure"><!-- 挿絵・補足記事 --> </div> <div class="aside"><!-- 余談(本文と直接関係ない記事) --> </div> </div> </div> <div><!-- フッター --> </div> </body> であっても、 body div{color:red;} body div+div{color:green;} body div+div+div{color:blue;} body div div div{color:black;} body div div div+div{color:magenta;} でも色を変えられる。しないけど・・(^^) ☆ divを付けすぎていないか？ ☆ divのclass名は、文書構造を示す適切なものか ☆ 子孫セレクタや隣接セレクタ、子供セレクタなど、セレクタで区別できないか？ 例) <div> <div class="section"> <div class="section"> <div class="section"> <div class="section"> </div> </div> </div> <div class="section"> <div class="section"> <div class="section"> </div> </div> </div> </div> </div> は、一つ一つ異なるclass名をつけなくても、みな区別できるのですよ。 どのようなクラス名がよいかは、 ★3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) が参考になるでしょう。 先ほど他の質問に回答した( テーブルをスクロールさせるときのスクロールの位置( http://okwave.jp/qa/q7105490.html#a4 )で示したHTMLソースもclass名はふたつしか(本当はなくても良い)使ってません。
その他の回答 (3)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
container1、container2、、、 menu1、menu2、、、 HEGDE64、EESCGEH、ABCDEFG、QAWSEDRFTGYHUJIKOLP、、、 http://dev.w3.org/html5/spec/elements.html#the-id-attribute >Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute. 識別子は不明瞭な文字列である。ID属性からその内容が推測できる物であるべきではない。
お礼
ありがとうございました。
どうでもいいんだけど ＞containts contentsのこと？ とりあえずですね、div多すぎます(笑) divタグはあくまで補助です。複数の要素を一つのボックスに入れたいときなどに使うものです。 単独のブロック要素にまでdivをつけようとしていませんか？何でもかんでもdivればいいってものじゃありませんよ。 http://www.google.com/search?hl=ja&lr=lang_ja&ie=UTF-8&oe=UTF-8&q=div%E7%97%85&num=50 それに10以上のボックスに全部floatかけたらブラウザサイズへの対応が大変だと思いますけども。 まあ、必要な場合が無いとは言えないですから…以下回答です。 「名前」と言っているのがidもしくはclassだと仮定してのものですが、そのボックスが「なんであるか」をidまたはclassにすればいいでしょう。left_boxでもproducts_listでもheaderでも何でもいいです。 もちろん、css適用のためだけにidやclassを設定するのでしたら、他と区別できれば何でも構いません。ただ、そのボックスの名称と呼べそうな語を付けた方が後々のためにいいでしょうね。
お礼
ありがとうございました。
- myuki1232
- ベストアンサー率57% (97/170)
なぜ名前をつけるのに悩むのでしょうか？ あなたが「それ」のことをわかっているならば、「それ」を表す言葉をつければいいだけです。 コンテナには container、メニューには menu、コンテンツには contents、フッターには footer とつけるのです。それと同じ事です。 代わりに付けて欲しいというのであれば、「それ」についてもっと詳しく説明して下さい。
お礼
ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ありがとうございました。初めて完全に自力でレイアウトを組むので、何をどうしていいのかさっぱり分かりませんでしたが、回答者さんの記入例がなかなか参考になりました。