- 締切済み
ｃｓｓでロールオーバーを作る時、<li>にidをふる理由
ナビゲーション部分などで、CSSでロールオーバーを作成する場合の質問です。 <ul> <li id="navi1"><a href="#">ナビ1</a></li> <li id="navi2"><a href="#">ナビ2</a></li> <li id="navi3"><a href="#">ナビ3</a></li> </ul> htmlでは上記のように記し、cssで #navi1 a{ display:block; ・ ・ ・ } #navi2 a{ display:block; ・ ・ ・ } というように表記しています。 参考書やネットで検索した際も上記のように書かれているのですが、 なぜ<li>にidを振るのでしょうか？ <a>にidを振る形は間違っているのでしょうか？ 初歩的な質問かもしれませんが、よろしくお願いします。
- HTML
- 回答数5
- ありがとう数10
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
すくなくとも、そのCSSの書き方やidの振り方は不適切そのものですね。 ＞参考書やネットで検索した際も上記のように書かれているのですが、 素人が、仕組みも理解せずに見よう見まねで紹介しているにすぎないです。そもそも、idも要らない場合もある。(classもなくてもコーディングできる) <ul id="nav"> <!-- このidはページの他の場所からリンクへたどりつくため、それが不要の場合はclassでよい --> <li><a href="#">ナビ1</a></li> <li><a href="#">ナビ2</a></li> <li><a href="#">ナビ3</a></li> </ul> CSSは ul#nav li a{display:block;} ですむ。同じプロパティを繰り返し記述するということは馬鹿げています。 たとえば <body> <div> <ul class="nav"><!-- (1) --> </ul> </div> <ul class="nav"><!-- (2) --> </ul> </body> このHTMLで、(1)のulは div ul.nav{}ですし (2)のulは body>ul.nav{} ・・・単にulとしたって、(1)と区別できるよね。 ul.nav{color:green} div ul.nav{color:red} としてテストしてごらんなさい。
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
＞<a>にidを振る形は間違っているのでしょうか？ 別に間違いではありません。自分の好きなように判断して構いません。 ただし皆が同じやり方をしている場合、なにかしらの理由（そのほうが便利だ、とか）がある場合が殆どです。 ちなみにこの場合は ＞CSSでロールオーバーを作成する場合 というのがポイント。CSS でロールオーバーを実装する場合 background 属性を利用して画像を表示させます。しかしながら <a> は非置換インライン要素。デフォルトではボックスのサイズを指定する事ができません。スタイルをいじれば <a> でもサイズを指定する事が可能になりますが、とりあえず CSS はシンプルであればあるほど良い。 そんな理由ではないでしょうか？
お礼
大変遅くなって申し訳ありません。 ご回答、ありがとうございました。 -------- CSS でロールオーバーを実装する場合 background 属性を利用して画像を表示させます。しかしながら <a> は非置換インライン要素。デフォルトではボックスのサイズを指定する事ができません。スタイルをいじれば <a> でもサイズを指定する事が可能になりますが、とりあえず CSS はシンプルであればあるほど良い。 -------- ということですが、<a>タグに背景画像と同じ大きさのヒットポイントを持たせようとすると、やはり<a>のスタイルをいじる必要はありますよね。 となると、やはりなぜ<li>にidをつけている人が多いのかが気になります。 ありがとうございました。
- LOHA
- ベストアンサー率52% (203/388)
ふらなければならないという事はありません。 ふる必要があるからそうしているだけです。 例えばメニュー項目でマウスホバーしたとき背景色を変えたる際、個別に違う背景色を指定したいなら、それぞれの要素ごとにスタイルを適用する必要があります。 その場合個別にid指定するのがスマートになるわけです。 質問の例だとdisplay:blockを毎回書いているようですが、私なら共通のスタイルはまとめて適用させますね（ulにidをつけて#hoge li a{ display: block; }的な感じ）。
お礼
大変遅くなって申し訳ありません。 ご回答、ありがとうございました。 そうなんです。ふる必要があるからふっているんです。 しかし、それがなぜ<li>であって<a>ではないのかが、気になっているんです。 <a>でも同じようにできるんです。 でも<a>に振っている人は見たことがないんです。 ＞私なら共通のスタイルはまとめて適用させますね（ulにidをつけて#hoge li a{ display: block; }的な感じ）。 そうですよね。ありがとうございます。 コピペしてしまって・・・申し訳ありません。 ありがとうございました。
- salonpath
- ベストアンサー率48% (194/399)
背景画像を使った画像置換をさせなければ別に必要ないと思いますけど idなりclassなりなんらかのユニークな印を付けなければ、個別でロールオーバーの画像を(cssのみで)指定できませんよね？ あとはaタグの親要素につけたほうがシンプルになるからじゃないでしょうか。
お礼
大変遅くなって申し訳ありません。 ご回答、ありがとうございました。 私の質問の仕方がちょっとわかりづらいですね・・・。 すみません。 ＞idなりclassなりなんらかのユニークな印を付けなければ、個別でロールオーバーの画像を(cssのみで)指定できませんよね？ そうです。おっしゃるとおりですね。 ＞あとはaタグの親要素につけたほうがシンプルになるからじゃないでしょうか。 やはりそんなかんじの理由なんでしょうかね・・・。 ありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
対象をどの要素にしたいかで、考え方が変わってくるだけでは？ ご提示のままだとあまり差が目立たないかもしれませんが、例えばli要素にpaddingを設定しておいて、background-colorを変えるとしたら、liとaの場合で動作する範囲も結果も違いがでると思いますけど？ ナビゲーションの場合、項目全体を対象としたいでしょうから、a要素だけでなくその項目としてhoverが効いたほうが自然ではないのでしょうか？ （a要素しかhoverが効かないブラウザもあるけど…）
お礼
大変遅くなって申し訳ありません。 ご回答、ありがとうございました。 項目全体ではありますが、結局 #navi1 a{ display:block; ・ ・ ・ } と指定するので、それなら<a>にidをつけて a#navi1 { display:block; ・ ・ ・ } としても一緒なのではないかとかんじているのです。 気にするほどのこともないことなんですかね・・・・。 ありがとうございました。
お礼
ご回答ありがとうございます。 質問の仕方が悪かったみたいですね・・・。 そういうことではなくてですね、idをふっているのはあくまでふる必要がある場合の話しをしているからです。 （プロパティなんかは本題に関係なくてちょっと適当にコピペしたので、すいません。） そのidを上記のような場合なぜ<a>ではなく<li>につけるのか？ という質問なんです・・・。