ページを開いているときのリンクの文字色を変えたい

質問

パソコン初心者です。
ソフトを使わず、メモ帳で入力してホームページを作成しています。

リンクの文字で、通常は黒、マウスを乗せたとき白に変わり、クリックしてページを開いたときにも白（どのページにいるのかわかるように）としたいのですが、うまくいきません。
スタイルシートで、マウスを乗せたときのa:hoverを#ffffffと設定し、選択したときのa:activeを#ffffffと設定しています。

マウスを乗せたときには白く変わるのですが、クリックしてページを開いても、リンクの文字の色は黒のままです。
これを白に変えるにはどうすればいいのでしょうか？

どなたかアドバイスよろしくお願いします。

回答No.2

outbrave · ベストアンサー

開いているページのリンク色を変えるには、ちょっと小細工が必要です。

例：
HTML
<ul>
<li class="current"><a href="./">Home</a></li>
<li><a href="./link/">Links</a></li>
<li><a href="./script/">Script</a></li>
<li><a href="./contact/">Contact</a></li>
</ul>

CSS
.current a {
color: #ffffff;
}

お礼

ご回答ありがとうございます。
教えていただいたように記入したら
開いているページのリンク文字が変わりました。
ありがとうございました。

回答No.4

ORUKA1951

＞スタイルシートで、マウスを乗せたときのa:hoverを#ffffffと設定し、選択したときのa:activeを#ffffffと設定しています。

　スタイルシートで指定する場合、
リンクに関する擬似クラス
:visited
:link
5.11.2 リンクに関する疑似クラス ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#link-pseudo-classes )

と動的な擬似クラス
:hover,:focus
:avtive
5.11.3 動的な疑似クラス ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#dynamic-pseudo-classes )
を使います。

　ですが、現在の位置(current)を使うセレクタはありません。
　質問が、各ページに共通なナビゲーションリンクをコピーペーストしているなら、せいぜい:visitedを使うしかありません。そのため、すでに訪問したページと同じ扱いになって、必ずしも今いる場所を示すとは限りません。

　方法としては、同じナビゲーションリンクだと、currentを何らかの方法で伝えなければなりませんが、それが出来ないとなるとHTMLを書き換えるしかありません。

<div class="nav">
　<ul>
　　<li><a href="/index.html">トップ</a></li>
　　<li>著書</li>
　　<li><a href="/blog/index.php">ブログ</a></li>
　　<li><a href="/profile/index.html">自己紹介</a></li>
　</ul>
</div>
　とか・・・・・・・・
<div class="nav">
　<ul>
　　<li><a href="/index.html">トップ</a></li>
　　<li class="current"><a href="/books/index.html">著書</a></li>
　　<li><a href="/blog/index.php">ブログ</a></li>
　　<li><a href="/profile/index.html">自己紹介</a></li>
　</ul>
</div>

とか・・・・
　このリンク先の配下にさらにサブファイルなりディレクトリが存在する場合は、後者、そうでない場合は前者を使うことになるでしょう。
　面倒くさいので、私は現在のページの色は特に変えないことのほうが多いです。多くの場合、さらにサブページが続くことが多いという理由もあります。

(注)
　サブページもたくさんある、すべてのページにすべて同じナビゲーションを設けている場合は、呼び出す外部スタイルシートをディレクトリごとに変える方法をとることもあります。
<link rel="stylesheet" type="text/css" media="screen" href="/css/general.css" >
の次の行に
<link rel="stylesheet" type="text/css" media="screen" href="/css/books.css" >
と追加して
それに、
div.nav ul li a{color:blue;}
div.nav ul li+li a{color:maroon;}
div.nav ul li+li+li a{color:blue;}
と書いておく。他にも色々な方法がありますが・・

お礼

ご回答ありがとうございます。
丁寧に説明していただいたので
現在のページを示すとは限らないことがわかりました。
リンク先にはサブページは設けていませんが
なにやら私にはちょっと難しそうで・・・
もうちょっと勉強してから試してみます。

回答No.3

DrFell

>マウスを乗せたときには白く変わるのですが、クリックしてページを開いても、リンクの文字の色は黒のままです。
>これを白に変えるにはどうすればいいのでしょうか？
マウスを乗せて白く変わったページと、クリックして開くページは別ですよね？activeは引き継がれるわけではありません。
そして、リンク先のページの自分自身のページへのリンクって意味あるのでしょうか？リンクのつもりでクリックしたのに同じページに飛んだらがっかりしません？

ということで、私のお勧めはリンクしないで、白を指定するです。

例1
html<span>現在のページ</span>
css span{color:white;}

例2
html
<ul class="menu">
<li><a href="page1.html">メニュー1</a></li>
<li><a href="page2.html">メニュー2</a></li>
<li>現在のページ</li>
<li><a href="page4.html">メニュー4</a></li>
</ul>
css
.menu li{color:white;}
.menu li a:link{color:black;}
.menu li a:visited{color:glay;}
.menu li a:hover{color:white;}
.menu li a:active{color:white;}

お礼

ご回答ありがとうございます。
質問の説明が下手だったと思います。

>マウスを乗せて白く変わったページと、クリックして開くページは別ですよね？

headerの下にナビみたいに各ページのタイトル（ホームとかアクセスとか）をつけて
マウスを乗せたときに色が変わり
さらにそのページをクリックしたとき
どこのページにいるかわかるようにしたかったのですが・・・

そのように説明されているのかもしれませんが
初心者だからか基本がわかっていないのかよくわかりませんでした。
すみません。もう少し勉強します。

回答No.1

ibegyourpardon

A:link{
color:#000000;}

A:visited{
color:#ffffff;}

A:hover{
color:#ffffff;}

A:active{
color:#ffffff;}

以上
CSSへの記載順序にも気を付けて見てください。

お礼

ご回答ありがとうございます。
クリックしてページを開き元のページに戻ると
訪問済みの白い文字になってしまいました。
私が表示したいものと少し違っていたようです。