ベストアンサー

CSSによるリンク設定

2009/12/04 00:44

いつもお世話になっております。こんばんは。テキストに対してCSSリンクの設定を行う場合、a;link または a;visited で未訪問及び訪問済みの色の設定が可能ですが、ページ内のすべてのテキストリンクに対して、同じ色が適応されてしまいます。各テキスト単位でリンクの色を設定するには、どのようにしたらいいでしょうか。わかる方がいらっしゃったら御教授ください。よろしくお願いいたします。

yakusokunosora
お礼率85% (65/76)

HTML
回答数3
ありがとう数4

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2009/12/04 11:12 回答No.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たる所以ですからね。詳細度・セレクタ(隣接セレクタ/子孫セレクタ)・擬似セレクタはスタイルシートのプロパティより先に身につけてください。

質問者

お礼 2009/12/06 12:40

ご指摘と、ご回答ありがとうございました。今回、ページ内のリンクはすべて「白」で統一しているのですが、注釈の部分だけは前後の文章に合わせて色を黒くしたかったのです。そのために、リンクの色分けが発生してしまいました。ユーザビリティアクセスビリティ・HP作成のルールとして心に留めておきます。ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

kyo999
ベストアンサー率64% (34/53)

2009/12/04 10:38 回答No.2

>>a;link または a;visited で未訪問及び訪問済みの色の設定が可能ですが、書き間違いかも知れませんが、疑似クラス(:linkや:visited)の先頭がセミコロン（ ; ）になっていますよ。「 a:link 」「 a:visited 」とコロン（ : ）を使って下さい。質問の本題と違いますが気になったので書いておきます。

質問者

お礼 2009/12/06 12:41

ご指摘ありがとうございました。コロンとセミコロンの件は投稿後に気がつきました。ケアレスミスによるものです。申し訳ありませんでした。

ログインすると、全ての回答が全文表示されます。

うぃず（@Wizard_Zero）
ベストアンサー率69% (344/495)

2009/12/04 01:53 回答No.1

下記のようにセレクタを使って分けることができます。 <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>

質問者