![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
<li>で並べたメニューのリンク色指定をクラスごとにする方法が分からず困っています。
図のような状態で、MENUは(赤)、TOPは(青)と2種類の色分けをしたメニューバーを作っています。
それぞれ、a:hoverのときに色が薄くなるよう指定したいのですが
うまくいきません。
●現在やっている方法
・htmlでリストを組み、それぞれリンクタグにクラス指定
MENU(赤) … class="menu"
TOP(青) … class="top"
・cssでclassのリンク色a、a:hoverを指定
【html】
<ul>
<li><a href=~ class="menu">MENU</a></li>
<li><a href=~ class="menu">MENU</a></li>
<li><a href=~ class="menu">MENU</a></li>
<li><a href=~ class="top">TOP</a></li>
</ul>
【css】
a.menu:link {
color: #000000;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #ff0000;
padding-left: 5px;
font-size: 10px;
margin-right: 10px;
}
a.menu:hover {
color: #cccccc;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #ffc5c5;
padding-left: 5px;
font-size: 10px;
margin-right: 10px;
}
…class="top"(青)も同じ感じ
----------------------------
クラスごとのリンク色指定がうまく認識されていない気がします。
記述が間違っているのでしょうか?それともそもそもこの方法が間違っているのでしょうか?
お恥ずかしながらこの場を借りて質問させて頂きました。
色々調べてみたのですが、苦戦しています。お知恵を貸して頂けると助かります。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
>「div.nav ul li.top:hover~」の記述の仕方も知らなかったので助かりました。
子孫セレクタの書き方のことでしょうか??
あなたが書かれたスタイルシートは、CSS(カスケーディングスタイルシート)です。CSSの最大の特徴は、カスケーディングなのです。カスケーディングを知らなきゃ意味がない。
プロパティなどを学ぶより、先に徹底的に身につけておかないと、スタイルシートは無論、HTMLも複雑怪奇なものになりますよ。
⇒5.セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
⇒6.値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
はすべて、しっかりね・
特に、
・セレクタと詳細度(特異性)
・カスケーディング
HTMLが正しくてスタイルシートがうまく適用されなかったとしたら、詳細度で負けていたか、カスケーディングで上書きされてしまったかだからです。
No.3
- 回答日時:
間違ってはいません。
原因はほかにある。HTMLが正しくない--
⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
スタイルシートが正しくない
⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。』
なお、そのような煩雑なHTMLやスタイルシートは書かないようにしましょう。手に負えなくなります。
★見やすくするため、全角スペースでインデントさせています。
<div class="nav">
<ul>
<li><a href="/Products">MENU</a></li>
<li><a href="/Books">BOOKS</a></li>
<li><a href="/menu">MENU</a></li>
<li class="top"><a href="/">TOP</a></li>
</ul>
</div>
と書いておけば良いです。divで囲んであるのは他とは違うブロックと言う意味でclass名でnavigationだと示しています。
これは、HTML5だと
<nav>
<ul>
<li><a href="/Products">MENU</a></li>
<li><a href="/Books">BOOKS</a></li>
<li><a href="/menu">MENU</a></li>
<li class="top"><a href="/">TOP</a></li>
</ul>
</nav>
となる部分です。
これに対してCSSは次のように書きます。横に並べることを想定しています。
div.nav ul,div.nav ol li{
list-style:none;margin:0;padding:0;
font-size:12px;line-height:20px;
}
div.nav ul{display:block;text-align:center;}
div.nav ul li{
display:inline;border-left:solid 5px red;
padding:0 10px 0 5px;
}
div.nav ul li.top{border-color:blue;}
div.nav ul li:hover{border-color:fuchsia;}
div.nav ul li.top:hover{border-color:aqua;}
たったこれだけです。随分とわかりやすくなっているはず。
・継承されるプロパティは継承させる。親に書く
・詳細度(特異性)を活用する。
この二つはCSS(カスケーディングスタイルシート)のカスケーディングそのものです。
とても分かりやすい解説ありがとうございます。
topだけ別classでcss指定してあげればよいのですね。
「div.nav ul li.top:hover~」の記述の仕方も知らなかったので助かりました。
No.2
- 回答日時:
応用というか、簡素化というか、便利な利用方法が色々あります。
以下一例ですが。<ul id="nav">
<li><a href="http~">MENU</a></li>
<li><a href="http~">MENU</a></li>
<li><a href="http~">MENU</a></li>
<li class="top"><a href="http~">TOP</a></li>
</ul>
#nav a{
color: #000;
border-left: 5px solid #f00;
padding-left: 5px;
font-size: 10px;
margin-right: 10px;
}
#nav a:hover{
color: #ccc;
border-left-color: #ffc5c5;
}
#nav .top a{ border-left-color: blue;}
#nav .top a:hover { border-left-color: aqua;}
---------------
例えば、id="nav"としたのは、そのナビゲーションだけに適応するので、それ以外も指定したければ、全部のnavを削除すればよい。
class="menu"を取っリ除いたのは、個別指定よりも、id="nav"というグループに纏めて指定できるから。
全部を統一指定しつつ、 class="top"だけを+個別指定で一部変更。
a ではなく li に指定したのは、li でも変更がある場合が多いから。
(classを指定せずに、li+li+liでもできますがIE6では不可)
個別指定ではなく、グループで纏めれば簡単だよって話。
----------------
因みに、
ナビゲーションメニューを装飾する例では、良く display:block; を利用しますけどね。
分かりやすい解説ありがとうございます。
まだwebを少しずつ覚えている段階で、コードがごちゃごちゃになってしまうので「こうやってシンプルにするんだ」と勉強になりました。
display:blockも見落としていました。ありがとうございます。
No.1
- 回答日時:
手元のfirefoxではマウスオーバーで薄くなります。
無駄が多い、ということを除けば、CSS自体の問題ではなさそうです。
( topとmenu,それぞれのlinkとhoverに同じ内容が重複しています。「カスケード」を利用すればlinkとhoverは色の設定だけで済みます)
○この内容が適用されていない
・これ以外に間違いがあって、期待通りのCSSになっていない
・これより優先されるCSSの記述がある
・HTMLに間違いがある
・読み込むファイルが違う
○対応していないブラウザを使って確認している
あたりが考えられます
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
html <ul></ul>の並びで一行空...
-
リストマーカーをボックス内に...
-
cssのみでメガメニューの作成に...
-
<li>で並べたメニューのリンク...
-
画像を縦に4つ並べたい場合
-
複数行にまたがる括弧を表示し...
-
html/cssの、navを2段にする...
-
HTMLのdlとul どちらが正しいと...
-
ボタンを横に並べて表示させる方法
-
li 長さ指定
-
文法チェックの<A>と</A>の間が...
-
excel vba で ulタグのなかのse...
-
【CSS】メニュー上部に固定させ...
-
疑似クラス :activeが効きません
-
ulやol、どの階層に居てもOKなc...
-
IEで<td>の全角を有効にする方法
-
divタグ内のコンテンツが重なっ...
-
HTMLで組織図を作成する方法
-
<ul>~</ul>が二つ続くと間に改...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
html <li>の中の文字一部に色を...
-
CSS質問:大手サイトを見ると何...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報