divでレイアウトするときのidやclassの命名について
図のようなイメージ(デザイン)をもとにコーディングするとします。
太い赤線部分はデザインの一部でなく、divで囲んでコーディングをする、という意味です。
最も外側の赤線、つまりdivには既に #osusume と命名しました。
内包するdivについて、
あなたなら、どのようなid、class、命名にしますか?
例)
#osusume{ }
#osusume .divL { }
#osusume .divL .div2L { }
#osusume .divL .div2R { }
#osusume .divR { }
#osusume .divR .div2L { }
#osusume .divR .div2R { }
意味不明でしたら加筆しますのでよろしくお願いします。
No.3ベストアンサー
- 回答日時:
id属性やclass属性は基本的に論理的な意味で命名すべき。
例えば文字を赤くするための.redというクラス名などはよく言われる悪例だ。
なぜ赤くするのかを考えて.importantなどというクラス名をつけるのが正しい。
その意味で、#osusumeというidは悪くないと思う。
だけどそうすると、中のdivに.osusumeというクラスを振れない。
#osusumeのままで行くなら、.shohinとかだろうか。二つ繋げて「オススメ商品」になる。
で、上の画像みたいな場合でさらに具体的にidを振るなら、#whiteday,#nabeだろうか。
繋げれば#osusume #whiteday.shohinで、「オススメのホワイトデー商品」になる。
さらにその下の階層なら、左の画像の方のブロックに.shohin-imageを、
右の商品説明のブロックに.shohin-detailというクラス名を振る。
繋げれば、略。
idやclass名の振り方に正解はないので、自分なりの付け方を身につけるのが一番です。
ここで書いたのはあくまで僕のやり方なので。参考になれば幸いです。
No.4
- 回答日時:
(X)HTML側をどうマークアップするかにも依ると思いますが…
・マークアップの構成要素が不明であれば、
#osusume .item { } …アイテム(アイテム毎に高さを決め打ちしてフロートできれば、左右に振り分けた指定は不要になります)
#osusume .thumbnail { } …商品サムネイル(画像)
#osusume .catch { } …商品キャッチコピー
といった感じでしょうか。.thumbnail、.catchはそれぞれ直近の親要素.itemが左だろうが右だろうがその中で同じレイアウトなわけですから、大親分の#osusumeから直のセレクタでの記述でもOKだと思います。
もし、マークアップが以下の様であれば、タイプセレクタを使う事により更にクラスセレクタを減らす事ができます。
<div id="osusume">
<ul class="item">
<li>
<img src="画像パス" alt="商品サムネイル" width="50" height="50" />
<p>商品キャッチコピー</p>
</li>
<li>
<img src="画像パス" alt="商品サムネイル" width="50" height="50" />
<p>商品キャッチコピー</p>
</li>
</ul>
</div>
・上記のマークアップの場合であれば、
#osusume ul.item li { } …アイテム(アイテム毎にli高さを決め打ちしてフロートできれば、左右に振り分けた指定は不要になります)
#osusume ul.item li img { } …商品サムネイル(画像)
#osusume ul.item li p { } …商品キャッチコピー
・なお、上記マークアップの場合、親要素である#osusumeの中にulでのマークアップがこの箇所しか出てこない場合であれば、ulのセレクタからクラスを取り去り、ただのタイプ・セレクタにすることもできます。
#osusume ul li { } …アイテム(同上)
#osusume ul li img { } …商品サムネイル(画像)
#osusume ul li p { } …商品キャッチコピー
・更に、親要素である#osusume自体がお奨め商品リスト以外の要素を含まないのであれば、divを取り去り、ul自体に#osusumeというidセレクタとして指定する事もできます。
ul#osusume li { } …アイテム(同上)
ul#osusume li img { } …商品サムネイル(画像)
ul#osusume li p { } …商品キャッチコピー
ただし、おすすめアイテムの高さが決め打ち(上記での高さ決め打ちは、原則としてoverflowプロパティによるスクロールを併用します)できない場合は、商品の数が左右2つづつ一行で終わりの場合を除き、商品1(左)商品2(右)商品3(左)商品4(右)…という様に複数行に続いて行くとなると、アイテム毎の高さによって左右の高さは揃わなくなります。その場合は、2アイテムづつ(一行)毎にブロックを区切らなくてはならない場合もあるので、最後のul#osusume~というパターンは使用できません(出現箇所が1回で終わらないので)。
クラス名、id名には「左」「右」とかの物理的(スタイルそのものを示す様な)なネーミングよりも論理的(内容をイメージできる様な)ネーミングの方が推奨されます。もしも現在のレイアウトを左右に逆転させなければならなくなった時、ネーミングと実際の構造が矛盾してしまうという何とも気持ちの悪い状態になります。
また、クラス名・id名に「Div」などのタグ名を付けてしまうのも紛らわしいですし論理的ではないのであまりお奨めできません(この場合も、マークアップがdivから他の要素に変わった場合など、ネーミングと実情が矛盾する事になりますね)。
No.2
- 回答日時:
普通は
<dl class="osusume">
<dt><img チョコの写真>
<dd><em>ホワイトデーにおすすめ!</em>早期割引やってます
<dt><img 鍋物の写真>
<dd><em>みんなで囲むあったか鍋!</em>カニ、モツ、ふぐちり他
</dl>
で済む話ですが、なぜDIVに?
ちゃんとリストにすれば、クラス名に苦慮しなくても意味が分かる
でしょ。
No.1
- 回答日時:
<div class="size用 x指定用 y指定用">
<div class="size用">
<img >
</div>
<div class="size用 x指定用">
<h3>title[new]</h3>
<span>body</span>
</div>
</div>
相対位置指定で用途ごとにクラスをわけるかなぁ。
その質問の記述だと全部ID状態なので
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- Ruby No route matches [GET] "/posts/5/destroy" 1 2022/03/24 13:00
- その他(プログラミング・Web制作) seleniumbasic chrome操作について 1 2023/03/29 15:40
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
サイトにjQueryが使用されてい...
-
CSSのクラス名・ID名の指定でワ...
-
透過背景を解除するにはどうす...
-
htmlのid属性って必要なの?
-
ライブドアブログの背景色を変...
-
Bootstrap 訪問済みテキストリ...
-
<p>と<p>と<p>の三つの使い方な...
-
idの中のid指定
-
clear bothで回り込みがうまく...
-
スタイルシートで、id属性の中...
-
Bootstrap3でcontainerがずれる...
-
最近、HTMLのヘッダーをIDで定...
-
brにクラスをつけてcssでdispla...
-
buttonで個別にhoverの時の色を...
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
【ヒトの神秘】美男美女から何...
-
VBAでの素数の求め方
-
HTML属性での「""」 「''」違い
-
ulタグやliタグの中でbrタグ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSのクラス名・ID名の指定でワ...
-
CSSに同じclass名がいっぱい‥。...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
liリストタグの背景色に色がつ...
-
HTML要素のid/class名の長さに...
-
brにクラスをつけてcssでdispla...
-
透過背景を解除するにはどうす...
-
htmlのid属性って必要なの?
-
フロートのクリアについて
-
ページの左右の余白(枠外)に...
-
サイトにjQueryが使用されてい...
-
CSS, リンクの色を一部変えるに...
-
スタイルシートでデザイン
-
外部css定義したclassをht...
-
Bootstrap3でcontainerがずれる...
-
CSSで、DIV#hogeという記述は何...
-
スタイルシートで、id属性の中...
-
一部のリンクの下線を消す
おすすめ情報