CSSについて教えてください。

下記の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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/09/27 21:47:08
  • 終了:2010/09/28 12:57:23

ベストアンサー

id:kaz No.1

kaz回答回数200ベストアンサー獲得回数422010/09/27 23:03:16

ポイント10pt

比較的簡単に色を変更できるのは、以下の4点です。


  • 項目のない、メニューの右側部分の背景色:.ddsmoothmenu
  • 常時見えている項目の背景色:.ddsmoothmenu ul li a
  • 子メニュー項目の背景色:.ddsmoothmenu ul li ul li a
  • 項目にカーソルを乗せた際の背景色:.ddsmoothmenu ul li a:hover

それぞれ「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等)項目の基本設定

id:akaired

大変詳しい解説ありがとうございます。■.ddsmoothmenu ulの常時見えている項目の全体、■.ddsmoothmenu ul li常時見えている項目の、見えない外枠というのが、少しわかりませんでした。これは、メニューのItem 1、Item 3、Item 4に該当するものなのでしょうか?つまり、これらはサブメニューがでてこない項目なので、サブメニューが出ない項目は上記2つの定義で設定するのでしょうか?

2010/09/27 23:45:59

その他の回答(1件)

id:kaz No.1

kaz回答回数200ベストアンサー獲得回数422010/09/27 23:03:16ここでベストアンサー

ポイント10pt

比較的簡単に色を変更できるのは、以下の4点です。


  • 項目のない、メニューの右側部分の背景色:.ddsmoothmenu
  • 常時見えている項目の背景色:.ddsmoothmenu ul li a
  • 子メニュー項目の背景色:.ddsmoothmenu ul li ul li a
  • 項目にカーソルを乗せた際の背景色:.ddsmoothmenu ul li a:hover

それぞれ「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等)項目の基本設定

id:akaired

大変詳しい解説ありがとうございます。■.ddsmoothmenu ulの常時見えている項目の全体、■.ddsmoothmenu ul li常時見えている項目の、見えない外枠というのが、少しわかりませんでした。これは、メニューのItem 1、Item 3、Item 4に該当するものなのでしょうか?つまり、これらはサブメニューがでてこない項目なので、サブメニューが出ない項目は上記2つの定義で設定するのでしょうか?

2010/09/27 23:45:59
id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422010/09/28 00:15:23

ポイント290pt

現状のソースでは、サブメニューが出る項目と出ない項目を区別する事はできません。

サブメニューが出ない項目を特別扱いしたい場合は、

そこに class などを割り当て、別途指定する必要があります。

(▼ マークは、img タグで直接指定されており CSS とは無関係です)


■.ddsmoothmenu ul / ■.ddsmoothmenu ul li に関しては、

きっちり CSS を覚えるぞ、という場合は非常に大切な部分ですが、

そうでない場合はあまり意識する必要が無いため、

メニュー項目が入っている、透明な箱のようなものをイメージしてください。

メニューは「ul の中にある li の中に a が入っている」という構造になっていますが、

実際に見えているのは「a」だけで「ul」「li」は厚みも隙間も 0 といった具合です。

(だからメニュー項目の色などは .ddsmoothmenu ul li a で指定する)

id:akaired

ご回答ありがとうございました!!まだわからないことがあります。次の質問に答えていただけると嬉しいです。お願いします。

2010/09/28 12:56:46

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません