人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: akaired
●カテゴリ:コンピュータ ウェブ制作
✍キーワード::hover :link :visited CSS HTML
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● kaz
●10ポイント ベストアンサー

比較的簡単に色を変更できるのは、以下の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つの定義で設定するのでしょうか?


2 ● kaz
●290ポイント

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

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

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

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


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

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

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

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

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

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ