- 締切済み
CSSの記述方法について
CSSを勉強しはじめたばかりの初心者です。 画像にマウスカーソルをあわせると色が変わるCSSに、 このように記述されている箇所がありました。 #example { width: ○○px; height: ○○px; padding-top: ○○px; padding-left: ○○px; background-image: none; } #example a,#example a:hover { display : block; width: ○○px; height: ○○px; padding-top: ○○px; background-image: url(○○.png); background-repeat: no-repeat; text-decoration: none; } #example a { background-position: ○○px ○○px; } #example a:hover { background-position: ○○px ○○px; } aとa:hoverの指定だけで実現できそうなのに、 なぜこのように4つもidがあるのでしょうか。 何かの意図やテクニックのひとつなのでしょうか？ まだ記述方法を詳しく理解できていないので、不思議に思いました。 ご存知の方がいらっしゃいましたらご教示ください。 よろしくお願いいたします。
- chacky0225
- お礼率14% (2/14)
- CSS
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
a {} と #example a{} は、対象が違います。 a{} は全てのa要素に適用されますが、#example a{}はid="example"に内包するa要素にしか適用されません。 <p><a>あ</a></p> <p id="example"><a>あ</a></p> ----------- #example{} と #example a{} も対象が違います。 -------------- #example a と #example a:hover の対象は同じで、実行されるタイミングが違いますので必須になりますが、 #example a, #example a:hover と #example a #example a:hover をまとめようと思うとまとめることができます。 -------------- #example a { display : block; width: ○○px; height: ○○px; padding-top: ○○px; background-image: url(○○.png); background-repeat: no-repeat; text-decoration: none; background-position: ○○px ○○px; } #example a:hover { background-position: ○○px ○○px; } -------------- ただし、「:hoverを切り替えている」ということを明確にするために、 （他のプロパティにまぎれて、background-positionがわかりづらいため） あえて不要な内容を書いたり、２つにわけて書くことは（人によっては）よくあります。 プログラミングでは「可読性」と呼ばれていて、 可読性を良くするためにあえて実行効率の悪い書き方をするのも、一つのテクニックです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞aとa:hoverの指定だけで実現できそうなのに、 それだと、そのスタイルシートが適用されるすべてのHTML内のA要素に適用されています。 a はタイプセレクタで、HTMLのA要素を選択します。 :hover は擬似クラスセレクタでaにくっついてますから、ポインターが乗ったA要素 #example a,*#example a:hover { は、本来は *#example a,#example a:hover { と書くべきで、基点となるセレクタは*(全称セレクタ--詳細度0)になります。 *#example a id属性にexampleをもつすべての要素の子孫(半角スペース)であるA要素 詳細度は 0 1 0 1 *#example a:hover id属性にexampleをもつすべての要素の子孫(半角スペース)であるA要素でポインターが乗ったもの 詳細度は 0 1 1 1 なお、このスタイルシートの書き方はとても無駄が多く、#exampleは、あくまで例として書かれているのだと思いますが、それに目をつぶっても、継承などカスケーディングの要点を理解されていない方の説明だと思われます。 CSSを見る限り、いわゆるスプライトによる背景の位置変更ですから・・ HTMLが、 <body> <div class="header"> ・・・【中略】・・・ <div class="nav"> <ol> <li><a href="">ABC</a></li> のように、div.header内のdiv.navだとするとスタイルシートは div.header div.nav{ width: ;height: ; position:relative; } div.header div.nav ol li{ display:inline-block; margin:0;padding:0; width: ; height: ; position:relative; } div.header div.nav ol li a{ display:block; width:100%;height:100%; background:url() no-repeat 0 0; } div.header div.nav ol li a:hover{ background-position: ; } で済むはずです。 ちゃんとしたサイトを参考にしないと身につきませんよ。
- naokita
- ベストアンサー率57% (1008/1745)
＞画像にマウスカーソルをあわせると色が変わるCSSに、 色？ 画像が動くんですよね？ --------------------- #example a { display : block; width: ○○px; height: ○○px; padding-top: ○○px; background: url(○○.png) no-repeat ○○px ○○px; } #example a:hover { background-position: ○○px ○○px; } --------------------- １、 #example a,#example a:hover { 重複 ↑ ↑ ↑ させる意味はないです。 ２、 上記から ,#example a:hover を削除し a のみにすると、 その下にある #example a{ } を上に合体させるので、統一。 ３、 backgroundプロパティも簡潔に１つに統一 もちらん、#example a,#example a:hoverのposition: ○○px ○○px;の値が違うという前提。同じ値なら#example a,#example a:hoverにバラす必要は無いから・・・ ただ、 テンプレートとかなら、細かいセレクタを重複設定させておいて、 ユーザーが細かく理解できるようにわざとしている場合もありますよ。 重複させると、素人ユーザーは混乱するでしょうから。 詳細化する人と、簡素化する人が居るって事。どちらが良いかは使う人も問題なので、簡素化する事が必ずしも正解だとは限りません。（リセットする事に関しても同じ） ------------------ 画像を配置したグローバルメニューで、良くある仕様です。 #nav li.～～ a:hover { background-position: -○○px -○○px;}
（１）ＣＳＳは上書きされ、後者が優先されます。 （２）定義が入れ子になっている点にも注意が必要です。 #exsample 中の aやa:hocer （３）：の後の擬似要素の種類も知らないと使えません。 a には visited もありますのでこれも定義してください。 a:visited:hoverなど。
