下記のURLにナビゲーションメニューがあります。一番上のメニューを参照ください。
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
下記のURLにCSSの定義があります。
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.css
下記は上記CSSの定義になっています。この定義がどういった意味になっているのかお教えください。
例えば、「.ddsmoothmenu ul li」はナビゲーションのここを意味していて、ここを変えると、ここの色が変わる。とかわかりやすくお教え頂けたら嬉しいです。それなりのポイントは差し上げます。
■.ddsmoothmenu
■.ddsmoothmenu u
■.ddsmoothmenu ul li
■.ddsmoothmenu ul li a
■* html .ddsmoothmenu ul li a
■.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited
■.ddsmoothmenu ul li a.selected
■.ddsmoothmenu ul li a:hover
■.ddsmoothmenu ul li ul
■.ddsmoothmenu ul li ul li
■.ddsmoothmenu ul li ul li ul
■.ddsmoothmenu ul li ul li a
比較的簡単に色を変更できるのは、以下の4点です。
それぞれ「background: #414141;」等で指定可能です。
CSS による色の指定の仕方は、解説ページを参照してください。
http://www.tagindex.com/stylesheet/basic/color.html
例:子メニューの背景色を真っ赤にする .ddsmoothmenu ul li ul li a{ ・ ・ ・ background: #ff0000; ← 追加 }
文字色を変更する場合、
「.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited」の指定があり、
スマートに変更するのは少々やっかいなため、以下のような力技が簡単です。
例:子メニューの文字を真っ青にする 以下を追加 .ddsmoothmenu ul li ul li a:link, .ddsmoothmenu ul li ul li a:visited{ color: #0000ff; }
■.ddsmoothmenu
ナビゲーション全体
■.ddsmoothmenu ul
常時見えている項目の全体
■.ddsmoothmenu ul li
常時見えている項目の、見えない外枠
■.ddsmoothmenu ul li a
項目の基本設定。
border-right: 1px solid #778; 項目の右側につける線の設定(太さ・種類・色)
■* html .ddsmoothmenu ul li a
IE6 用での表示崩れを防ぐ為の設定
■.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited
項目の基本設定の補足
ページを訪れるとリンクの色が変わるのが一般的ですが、
ナビゲーションではそういった変化が無い方がよいため、
リンク先訪問後も色が変わらないように設定しています。
■.ddsmoothmenu ul li a.selected
サブメニューが開いた際の、選択中の親メニュー項目の表示設定
■.ddsmoothmenu ul li a:hover
項目の上にカーソルを乗せた際の設定
■.ddsmoothmenu ul li ul
子メニュー(Sub Item)全体の設定
■.ddsmoothmenu ul li ul li
子メニュー(Sub Item1.1等)項目の、見えない外枠
■.ddsmoothmenu ul li ul li ul
孫メニュー(Sub Item 2.1.1等)または、
それ以上深い階層の項目の全体の設定
■.ddsmoothmenu ul li ul li a
子メニュー(Sub Item1.1等)項目の基本設定
比較的簡単に色を変更できるのは、以下の4点です。
それぞれ「background: #414141;」等で指定可能です。
CSS による色の指定の仕方は、解説ページを参照してください。
http://www.tagindex.com/stylesheet/basic/color.html
例:子メニューの背景色を真っ赤にする .ddsmoothmenu ul li ul li a{ ・ ・ ・ background: #ff0000; ← 追加 }
文字色を変更する場合、
「.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited」の指定があり、
スマートに変更するのは少々やっかいなため、以下のような力技が簡単です。
例:子メニューの文字を真っ青にする 以下を追加 .ddsmoothmenu ul li ul li a:link, .ddsmoothmenu ul li ul li a:visited{ color: #0000ff; }
■.ddsmoothmenu
ナビゲーション全体
■.ddsmoothmenu ul
常時見えている項目の全体
■.ddsmoothmenu ul li
常時見えている項目の、見えない外枠
■.ddsmoothmenu ul li a
項目の基本設定。
border-right: 1px solid #778; 項目の右側につける線の設定(太さ・種類・色)
■* html .ddsmoothmenu ul li a
IE6 用での表示崩れを防ぐ為の設定
■.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited
項目の基本設定の補足
ページを訪れるとリンクの色が変わるのが一般的ですが、
ナビゲーションではそういった変化が無い方がよいため、
リンク先訪問後も色が変わらないように設定しています。
■.ddsmoothmenu ul li a.selected
サブメニューが開いた際の、選択中の親メニュー項目の表示設定
■.ddsmoothmenu ul li a:hover
項目の上にカーソルを乗せた際の設定
■.ddsmoothmenu ul li ul
子メニュー(Sub Item)全体の設定
■.ddsmoothmenu ul li ul li
子メニュー(Sub Item1.1等)項目の、見えない外枠
■.ddsmoothmenu ul li ul li ul
孫メニュー(Sub Item 2.1.1等)または、
それ以上深い階層の項目の全体の設定
■.ddsmoothmenu ul li ul li a
子メニュー(Sub Item1.1等)項目の基本設定
大変詳しい解説ありがとうございます。■.ddsmoothmenu ulの常時見えている項目の全体、■.ddsmoothmenu ul li常時見えている項目の、見えない外枠というのが、少しわかりませんでした。これは、メニューのItem 1、Item 3、Item 4に該当するものなのでしょうか?つまり、これらはサブメニューがでてこない項目なので、サブメニューが出ない項目は上記2つの定義で設定するのでしょうか?
現状のソースでは、サブメニューが出る項目と出ない項目を区別する事はできません。
サブメニューが出ない項目を特別扱いしたい場合は、
そこに class などを割り当て、別途指定する必要があります。
(▼ マークは、img タグで直接指定されており CSS とは無関係です)
■.ddsmoothmenu ul / ■.ddsmoothmenu ul li に関しては、
きっちり CSS を覚えるぞ、という場合は非常に大切な部分ですが、
そうでない場合はあまり意識する必要が無いため、
メニュー項目が入っている、透明な箱のようなものをイメージしてください。
メニューは「ul の中にある li の中に a が入っている」という構造になっていますが、
実際に見えているのは「a」だけで「ul」「li」は厚みも隙間も 0 といった具合です。
(だからメニュー項目の色などは .ddsmoothmenu ul li a で指定する)
ご回答ありがとうございました!!まだわからないことがあります。次の質問に答えていただけると嬉しいです。お願いします。
大変詳しい解説ありがとうございます。■.ddsmoothmenu ulの常時見えている項目の全体、■.ddsmoothmenu ul li常時見えている項目の、見えない外枠というのが、少しわかりませんでした。これは、メニューのItem 1、Item 3、Item 4に該当するものなのでしょうか?つまり、これらはサブメニューがでてこない項目なので、サブメニューが出ない項目は上記2つの定義で設定するのでしょうか?