No.4ベストアンサー
- 回答日時:
divやspanについては仕様書に記述があります。
【引用】____________ここから
DIV要素・【中略】・は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
本来は文書の構造を示すためのものです。残念ながら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/h … )
が参考になるでしょう。
先ほど他の質問に回答した( テーブルをスクロールさせるときのスクロールの位置( http://oshiete.goo.ne.jp/qa/7105490.html#a4 )で示したHTMLソースもclass名はふたつしか(本当はなくても良い)使ってません。
この回答へのお礼
お礼日時:2011/11/02 06:15
ありがとうございました。初めて完全に自力でレイアウトを組むので、何をどうしていいのかさっぱり分かりませんでしたが、回答者さんの記入例がなかなか参考になりました。
No.3
- 回答日時:
container1、container2、、、
menu1、menu2、、、
HEGDE64、EESCGEH、ABCDEFG、QAWSEDRFTGYHUJIKOLP、、、
http://dev.w3.org/html5/spec/elements.html#the-i …
>Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.
識別子は不明瞭な文字列である。ID属性からその内容が推測できる物であるべきではない。
No.2
- 回答日時:
どうでもいいんだけど
>containts
contentsのこと?
とりあえずですね、div多すぎます(笑)
divタグはあくまで補助です。複数の要素を一つのボックスに入れたいときなどに使うものです。
単独のブロック要素にまでdivをつけようとしていませんか?何でもかんでもdivればいいってものじゃありませんよ。
http://www.google.com/search?hl=ja&lr=lang_ja&ie …
それに10以上のボックスに全部floatかけたらブラウザサイズへの対応が大変だと思いますけども。
まあ、必要な場合が無いとは言えないですから…以下回答です。
「名前」と言っているのがidもしくはclassだと仮定してのものですが、そのボックスが「なんであるか」をidまたはclassにすればいいでしょう。left_boxでもproducts_listでもheaderでも何でもいいです。
もちろん、css適用のためだけにidやclassを設定するのでしたら、他と区別できれば何でも構いません。ただ、そのボックスの名称と呼べそうな語を付けた方が後々のためにいいでしょうね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- 写真・ビデオ 写真や動画を保存する、これらを満たしたサービスはありませんか。 ・iOS, Android, Mac 2 2023/07/30 18:35
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- HTML・CSS AWSのhtml 1 2023/06/08 23:20
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
line-height指定で発生する余白...
-
一括で全体を右にずらす
-
article、section、hgroup?
-
div要素が重なってします
-
html5でheaderの中にnav
-
ブログのサイドバーが下にくる
-
オシャレな区切り線はありませ...
-
グラフィックス
-
idとclassの指定方法
-
HTML属性での「""」 「''」違い
-
<div>テキスト</div>
-
html divボックスの入れ子で中...
-
html5にて水平線の引き方は?
-
HTMLとCSSの次に覚えることは何...
-
html の divとtable の役割
-
h1のテキストサイズよりh2の方...
-
【html&css】太さの違う2本線の...
-
改行がしたいのですが、うまく...
-
携帯サイト、ナノでのタグ編集...
-
コンピューターの画像ブロック
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報