こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

ホームページを作成中です。
リンクの上にポインタを置くと、背景色と文字色を変えるようにしたいのですが、
それについてはこちらの以前からの質問で、
テキストエディタの<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項目にそれぞれリンクテキストが貼り付けてあるとして、
  あいうえお  → ここは青色に
  かきくけこ  → ここはオレンジ色に
  さしすせそ  → ここは黄色に      する場合、
どのような操作(作業)をすればそのとおりの色に変えることができるでしょうか?

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

投稿日時 - 2007-10-10 16:40:55

QNo.3417705

すぐに回答ほしいです

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

★アドバイス
>ただ、テキストエディタのどの部分に教えていただいたものを
>貼り付ければよいかわかりません(;;)
 ↑
 テキストエディタの <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>

以上。

投稿日時 - 2007-10-11 17:16:24

お礼

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

投稿日時 - 2007-10-23 11:40:03

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

質問者さんのやりたいことを解説しているサイトを思い出したので、アドレス入れておきます。
No.2さんの色指定を、スタイルシートでまとめたパターンが紹介されてました。

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

投稿日時 - 2007-10-13 16:07:27

お礼

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

投稿日時 - 2007-10-23 11:43:19

ANo.1

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>

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

投稿日時 - 2007-10-10 17:16:26

補足

丁寧に教えていただいて大変感謝しております。
ただ、テキストエディタのどの部分に教えていただいたものを
貼り付ければよいかわかりません(;;)
また、
<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:33

お礼

いろいろやってはみたものの、いまいち把握できません(;;)
HTMLについて1から勉強したいと思います。
ありがとうございました。

投稿日時 - 2007-10-23 11:37:22

あなたにオススメの質問