- ベストアンサー
CSSによるリンク設定
いつもお世話になっております。こんばんは。 テキストに対してCSSリンクの設定を行う場合、a;link または a;visited で未訪問及び訪問済みの色の設定が可能ですが、 ページ内のすべてのテキストリンクに対して、同じ色が適応されてしまいます。各テキスト単位でリンクの色を設定するには、どのようにしたらいいでしょうか。わかる方がいらっしゃったら御教授ください。 よろしくお願いいたします。
- yakusokunosora
- お礼率85% (65/76)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
擬似クラスは、:linkとコロンです。 ＞ページ内のすべてのテキストリンクに対して、同じ色が適応されてしまいます。 二点だけ ユーザビリティ・アクセスビリティの関係で同じサイトでは統一するべきとされています。訪問者が迷うので。 他のセレクタと併用する、あるいは詳細度で指定する。 <body> <h1>見出し</h1> <div class="abstruct"> <p>要約<a href="#test">テスト</a></p> </div> <div id="bodyText"> <p><a href="./top.html">トップ</a></a> <ul> <li><a href="./a.html">Aについて</a></li> </ul> </div> <div> <p><a href="XXX.html">XXX</a></p> <ul> <li><a href="YYY.html">YYY</a> </div> </body> の場合、 a:link{ color:red;} div a:link|color:green;} div p a:link{color:black;} div#bodyText a:link{color:blue;} div#bodyText p a:link{color:red;} div ul li a:link{color:magenta;} などで色はすべて異なるはず。 色付けのためだけにclass="red"なんてするのは、HTMLの趣旨からは外れています。font color="red"が否定されるのと一緒です。 詳細度やセクタわ適切に利用することで、たとえば<div class="Note">内の<ul>配下の<li>のみに適用なんて簡単にできるわけです。上記の例を見ると見栄えのためだのclass名とか無いでしょ。後からdiv#bodyText p a:linkの色を赤から黄色に変えようとするとき、もしclass="red"なんて書いていたらおかしいでしょ。 それがまたCSS-カスケーディング(継承)スタイルシートのCSSたる所以ですからね。詳細度・セレクタ(隣接セレクタ/子孫セレクタ)・擬似セレクタはスタイルシートのプロパティより先に身につけてください。
その他の回答 (2)
- kyo999
- ベストアンサー率64% (34/53)
>>a;link または a;visited で未訪問及び訪問済みの色の設定が可能ですが、 書き間違いかも知れませんが、疑似クラス(:linkや:visited)の先頭がセミコロン（ ; ）になっていますよ。 「 a:link 」「 a:visited 」とコロン（ : ）を使って下さい。 質問の本題と違いますが気になったので書いておきます。
お礼
ご指摘ありがとうございました。 コロンとセミコロンの件は投稿後に気がつきました。 ケアレスミスによるものです。 申し訳ありませんでした。
- うぃず（@Wizard_Zero）
- ベストアンサー率69% (344/495)
下記のようにセレクタを使って分けることができます。 <html> <head> <style type="text/css"> a:link { color: blue; } a:hover { color: aqua; } a.red:link { color: red; } a.red:hover { color: pink; } a.green:link { color: green; } a.green:hover { color: yellowgreen; } </style> </head> <body> <a href="/">Link</a><br /> <a href="/" class="red">Link</a><br /> <a href="/" class="green">Link</a> </body> </html>
お礼
早々のご回答ありがとうございました。 ご指摘の方法でうまくいきました。 ありがとうございます。
お礼
ご指摘と、ご回答ありがとうございました。 今回、ページ内のリンクはすべて「白」で統一しているのですが、注釈の部分だけは前後の文章に合わせて色を黒くしたかったのです。 そのために、リンクの色分けが発生してしまいました。 ユーザビリティアクセスビリティ・HP作成のルールとして心に留めておきます。 ありがとうございました。