- ベストアンサー
マウスポインタがリンクの上に乗ると色が変わる設定方法
- ホームページ作成中のリンクにマウスポインタを乗せると、背景色と文字色が変わる設定方法について教えてください。
- 質問者は以前の質問で、テキストエディタの<head>～</head>内にCSSを記述することで、マウスポインタがリンクの上に乗った際の色変更を実現できることを知りました。
- しかし、リンクの色変更が一括して行われるため、特定のリンクごとに異なる色を設定する方法が分からないようです。
- oyajimushi
- お礼率73% (128/173)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
★アドバイス ＞ただ、テキストエディタのどの部分に教えていただいたものを ＞貼り付ければよいかわかりません（；；） ↑ テキストエディタの <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> 以上。
その他の回答 (2)
- em03
- ベストアンサー率48% (34/70)
質問者さんのやりたいことを解説しているサイトを思い出したので、アドレス入れておきます。 No.2さんの色指定を、スタイルシートでまとめたパターンが紹介されてました。
お礼
CSSとかHTMLとか、そこから把握しないとなかなか難しいですね。 教えていただいたサイトを含めて、もう一度勉強しなおしてみます。 ありがとうございました。
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> とすれば、出来るはずです。
お礼
いろいろやってはみたものの、いまいち把握できません（；；） HTMLについて１から勉強したいと思います。 ありがとうございました。
補足
丁寧に教えていただいて大変感謝しております。 ただ、テキストエディタのどの部分に教えていただいたものを 貼り付ければよいかわかりません（；；） また、 <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> と入れても、標準の時の文字色が青ではなく、クリックしたこと無くても緑色です。 私の入力の仕方が悪いのでしょうか？ ちなみにホームページデザイナーを使っています。
お礼
実際教えていただいたものを貼り付けると、文字の色はそのとおりになりました。 自分の中では、何がどうなのかいまいち把握できていません（；；） １から勉強したいと思います。 ありがとうございました。