マススポインタがリンクの上に乗ると色が変わる設定方法

解決済

質問者：oyajimushi
質問日時：2007/10/10 16:40
回答数：3件

ホームページを作成中です。
リンクの上にポインタを置くと、背景色と文字色を変えるようにしたいのですが、
それについてはこちらの以前からの質問で、
テキストエディタの<head>～</head>内に、
<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:pink; text-decoration:none; }
a:hover { background-color:yellow; color:red; text-decoration:underline overline; }
</style>
と入れると色が変わるようになることを知りました。
その場合、そのままの状態では文字は緑色、マススを乗せると背景が黄色で文字色が赤色に、
クリック後はピンク色の文字に変わるようになると思います。

『a:link { color:blue; text-decoration:none; }』の部分はどこに生かされているのかわかりません。
この部分は一体何の意味があるのでしょうか？

また、上記をテキストエディタに貼り付けてしまうと、リンク部分が全てそうなってしまいますよね？
マウスを乗せた時には同じ背景色・文字色になってもいいのですが、
何もしない状態（見た目、上記で言う何もしない状態の時）にそれぞれに色を変える場合はどのようにすればいいのですか？

例えると、下記３項目にそれぞれリンクテキストが貼り付けてあるとして、
　　あいうえお　　→　ここは青色に
　　かきくけこ　　→　ここはオレンジ色に
　　さしすせそ　　→　ここは黄色に　　　　　　する場合、
どのような操作（作業）をすればそのとおりの色に変えることができるでしょうか？

とても解りづらい質問ですみませんが、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3

回答者： em03
回答日時：2007/10/13 16:07

質問者さんのやりたいことを解説しているサイトを思い出したので、アドレス入れておきます。

No.2さんの色指定を、スタイルシートでまとめたパターンが紹介されてました。

参考URL：http://web-img.com/col/col-019.htm

- 0
- 件

通報する

この回答へのお礼

CSSとかHTMLとか、そこから把握しないとなかなか難しいですね。
教えていただいたサイトを含めて、もう一度勉強しなおしてみます。
ありがとうございました。

通報する

お礼日時：2007/10/23 11:43

No.2ベストアンサー

回答者： Oh-Orange
回答日時：2007/10/11 17:16

★アドバイス

＞ただ、テキストエディタのどの部分に教えていただいたものを
＞貼り付ければよいかわかりません（；；）
　↑
　テキストエディタの <head>～</head> 内に貼り付けます。
　または外部のスタイルシートのファイル(css)に記述します。
＞と入れても、標準の時の文字色が青ではなく、クリックしたこと無くても緑色です。
　↑
　？？？
　下にサンプルを載せます。

サンプル:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
/* 下線を消す */
a{
text-decoration:none;
}
/* 訪問色 */
a:visited{
color:green;
}
/* マウスを乗せた色 */
a:active,
a:hover{
background-color:red;
color:white;
}
</STYLE>
<TITLE>タイトル</TITLE>
</HEAD><BODY BGCOLOR=black>

<A HREF="http://～"><FONT COLOR=blue>あいうえお</FONT></A><BR>
<A HREF="http://～"><FONT COLOR=orange>かきくけこ</FONT></A><BR>
<A HREF="http://～"><FONT COLOR=yellow>さしすせそ</FONT></A><BR>

</BODY>
</HTML>

以上。

- 0
- 件

通報する

この回答へのお礼

実際教えていただいたものを貼り付けると、文字の色はそのとおりになりました。
自分の中では、何がどうなのかいまいち把握できていません（；；）
１から勉強したいと思います。
ありがとうございました。

通報する

お礼日時：2007/10/23 11:40

No.1

回答者： Ajita
回答日時：2007/10/10 17:16

a:linkは、リンクの標準の状態。

（クリックしたことがなく、マウスが乗ってない状態）
a:visitedは、クリックしたことがあるリンクの状態。
a:activeは、フォーカスがあたっているか、クリックしているときの状態。
a:hoverは、リンクにカーソルが載っているときの状態です。

それぞれのリンクに色を変えたい場合は、クラスやIDというのを使います。
詳しくは、CSSで調べてみてください。

この例ですと、
a:link.blue_link { color:blue; text-decoration:none; }
a:link.orange_link { color:orange; text-decoration:none; }
a:link.yellow_link { color:yellow; text-decoration:none; }

<a class="blue_link">あいうえお</a>
<a class="oracle_link">かきくけこ</a>
<a class="yellow_link">さしすせそ</a>

とすれば、出来るはずです。

この回答への補足

丁寧に教えていただいて大変感謝しております。
ただ、テキストエディタのどの部分に教えていただいたものを
貼り付ければよいかわかりません（；；）
また、
<style type="text/css">
a:link { color:blue; text-decoration:none; }
a:visited { color:green; text-decoration:none; }
a:active { color:pink; text-decoration:none; }
a:hover { background-color:yellow; color:red; text-decoration:underline overline; }
</style>
と入れても、標準の時の文字色が青ではなく、クリックしたこと無くても緑色です。
私の入力の仕方が悪いのでしょうか？
ちなみにホームページデザイナーを使っています。

補足日時：2007/10/11 09:53

通報する