マウスポインタがリンクの上に乗ると色が変わる設定方法
- ホームページ作成中のリンクにマウスポインタを乗せると、背景色と文字色が変わる設定方法について教えてください。
- 質問者は以前の質問で、テキストエディタの<head>～</head>内にCSSを記述することで、マウスポインタがリンクの上に乗った際の色変更を実現できることを知りました。
- しかし、リンクの色変更が一括して行われるため、特定のリンクごとに異なる色を設定する方法が分からないようです。
- ベストアンサー
マススポインタがリンクの上に乗ると色が変わる設定方法
ホームページを作成中です。 リンクの上にポインタを置くと、背景色と文字色を変えるようにしたいのですが、 それについてはこちらの以前からの質問で、 テキストエディタの<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; }』の部分はどこに生かされているのかわかりません。 この部分は一体何の意味があるのでしょうか？ また、上記をテキストエディタに貼り付けてしまうと、リンク部分が全てそうなってしまいますよね？ マウスを乗せた時には同じ背景色・文字色になってもいいのですが、 何もしない状態（見た目、上記で言う何もしない状態の時）にそれぞれに色を変える場合はどのようにすればいいのですか？ 例えると、下記３項目にそれぞれリンクテキストが貼り付けてあるとして、 あいうえお → ここは青色に かきくけこ → ここはオレンジ色に さしすせそ → ここは黄色に する場合、 どのような操作（作業）をすればそのとおりの色に変えることができるでしょうか？ とても解りづらい質問ですみませんが、よろしくお願いします。
- 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> と入れても、標準の時の文字色が青ではなく、クリックしたこと無くても緑色です。 私の入力の仕方が悪いのでしょうか？ ちなみにホームページデザイナーを使っています。
関連するQ&A
- CSS, リンクの色を一部変えるには？
全体にこちらを指定してまして a { text-decoration: none; color: #0099ff; } a:hover { text-decoration: none; color: pink; } 一部だけ緑色にしたいのですが .green a { text-decoration: none; color: green; } .green a:hover { text-decoration: none; color: black; } <a href="http://www.google.co.jp" class="green">Google</a> こうすると変わりません。。。 どなたかご存知でしょうか？
- ベストアンサー
- CSS
- スタイルシート上でリンク文字色の設定
○スタイルシート iro { font-size: 18; } iro:link { text-decoration:none;color:赤; } iro:visited { text-decoration:none;color:青; } iro:hover { color:黄 } iro:active { text-decoration:none;color:緑; } ○本文 <p id="iro"> <a href="abc.html">リンク</a> </p> すごく基本的な質問です。 スタイルシート上でリンク文字の色を設定したいのですが、さっぱりわかりません。 上のコマンドではうまくいかないことは確認済みなんですが、一応書いてみました。 ちなみに赤、青といった色指定の部分は、簡単になるように「#～」ではなくああいう風に書いています。 めんどうでしたら、色指定の部分は空白でかまいません。 正しい書き方を教えてもらえないでしょうか。
- ベストアンサー
- HTML
- 個別にリンクの色を変える方法
リンクの色を個別に変える方法はありますか？ 私が作成したWebサイトでは。現在、リンクの色は青で統一しておりますが、数か所のリンクだけグレーにしたいと思っております。 現状のスタイルシートは次のようになっております。 a:link { text-decoration: none; color: #2b50bc; } a:hover{ text-decoration: none; text-decoration:underline; } a:visited { text-decoration: none; color: #2b50bc; } 上記のように記述し、全てのリンクは青に統一されております。 そこで、HTMLファイルのリンクをグレーにしたい単語にアンカーとクラスまたはIDを付けて、スタイルシートでそのクラスまたはIDのcolorをグレーにしてみましたが、リンクの色は青のままでした。 どのようにすれば、個別にリンクの色を変えることができるのでしょうか？
- ベストアンサー
- CSS
- ID for Web Lifeでリンク色をカスタマイズするには
ID for Web Lifeで作ったHPのカスタマイズ方法について教えて下さい。 文字やリンクの色などの指定するために、 a:link {color:色; text-decoration:none } a:visited {color:色; text-decoration:none } a:hover {color:色; text-decoration:none } a:active {color:色; text-decoration:none } ↑このタグを入れましたが、デフォルト（link・visited/青色、hover/水色、active/赤色）のままです。 ページ毎に色を変えたいと思っているのですが。 ID for Web Lifeで作られたHPのソースを見ましたが分かりませんでした。 お分かりになる方、よろしくお願い致します。
- ベストアンサー
- HTML
- fc2ブログでリンクテキストの色が設定できない
テンプレート名 Penetration です。テキストリンクの色を変更するためにcssを編集しましたが、記事内のテキストリンクに反映されません。 変更箇所は↓ /* ハイパーテキスト ------------------------------------------------- */ a { overflow: hidden; /* for Fx */ } a:link { color: #8bc9d7; text-decoration: none; } a:visited { color: #8bc9d7; } a:focus, a:hover { text-decoration: none; } a:active { } ↑上記箇所を、 /* ハイパーテキスト ------------------------------------------------- */ a { overflow: hidden; /* for Fx */ } a:link { color: #6699FF; text-decoration: none; } a:visited { color: #6699FF; text-decoration: none; } a:focus, a:hover { color: #FF9900; text-decoration: none; } a:active { } ↑に書き換えました。 記事タイトル・カレンダー・カテゴリ・コメント・トラックバックは希望通り、テキストリンク→水色 カーソルを重ねると→黄色になりましたが、記事内のテキストには反映されません。 ※訪問済みもアクティブも水色のままで良いので記述しなくてもいい気がしますが、原因が分からなくなりそうで、今のところ消していません。 cssを触りだして10日程度の初心者です。ご指導宜しくお願いします。
- ベストアンサー
- ブログ
- リンクの色を2色で使い分けたい
はじめまして。 良かったらどなたか教えて下さい。 今、一枚のページを作っているのですが、背景色を"#ffffff"（白）とし、そのリンクを以下の様に指定しました。 <style type="text/css"> <!-- A { text-decoration: none} A:link {color:#000000;} A:visited {color:#ffffff;} A:hover {color:#ff6600;} --> </style> 「白地に黒文字リンク、オンマウス時はオレンジ」という指定です。 ところが、同じページ内でテーブルを組み、その背景を#000000と指定する事になりまして、その中にリンクを入れると、「黒字に黒文字リンク、オンマウス時はオレンジ」 でリンクの文字が見えなくなってしまいます。 hoverの効果（オンマウス時はオレンジ）の効果を残しつつ、リンク色を二色に分ける方法は無いでしょうか？ （クラス指定の使い方がよく判ってないので、自分で指定するとエラーしか出ないのです）。 お忙しい所申し訳ございませんが、宜しくお願い致します。
- ベストアンサー
- HTML
- HPの背景や、リンクの文字色を変えたりしたら・・・
HPの背景やリンクの文字色を変えてFFFTPでアップしたのに、ブラウザでは変わっていません。 テキストエディタの確認では変わるのですが・・・。 キャッシュのクリアもしましたが、なにも変わりません。 タグの問題ですか？ <html> <head> <title>profile</title> <STYLE type="text/css"> <!-- a{text-decoration: none} a:hover{color:hotpink ; font-size:35pt} body{background-image:url(○○.bmp) ; background-attachment:fixed} --> </style> </head> と、タグはこんな感じですが・・・。
- ベストアンサー
- HTML
- ■GoLive 6■テキストリンクの「ＣＳＳ」設定について教えてください。
GoLive６を使っています。 通常、テキストのリンクは青文字ですよね？ 濃色の背景の部分のリンクのみ白文字で、他は青文字にしたいのですが、設定に行き詰っています。 まず、 テキストリンクのルールを「ＣＳＳエディタ」でリンク表示を白に設定しました （a { text-decoration: none }）。 次に、 ページ全体のテキストリンクが白になってしまうので、 青文字にしたいテキストをマウスで選択してテキストの色を青にしました。 すると・・・、 白文字リンクと青文字リンクが混在するページが完成！ ・・・と、手持ちのマニュアルには書いてありますが、テキストの色を変えようがテキストにリンクが指定してあれば、当然ＣＳＳの設定により「白文字」にされてしまいます。 あたりまえのようですが、マニュアルにも書いてありますし、私の設定が間違っているのでしょうか？ どなたかいい方法をご存知の方、ご教授お願い致します。
- ベストアンサー
- ホームページ作成ソフト
- 文章によって違うリンクカラーの指定をするには
同じページ内で文章によって違うリンクカラーの指定はできるのでしょうか？ 現在外部のCSSファイル内において下記の指定をしています。 a:link { color: #000000; text-decoration: none} a:active { color: #FF0000; text-decoration: none} a:visited { color: #000000; text-decoration: none} a:hover { color: #FF0000; text-decoration: none} これを文章によっては、a:linkとa:visited の色を別の色にしたいのですが、どのような方法がありますか？IDやclass指定を使えば可能なのでしょうか？アドバイスおねがいいたします。
- ベストアンサー
- HTML
- リンクだけが指定にない色になります。
テキストの色を全体に統一したいのですが、リンク部分のみ指定にない色（青）になります。 <STYLE type="text/css"> <!-- a:hover { color:ffffff; } --> </style> <BODY TEXT="CC0033" VLINK="CC6666" ALINK="CC6666"> <A HREF="link.html "STYLE="TEXT-DECORATION:NONE;"> <FONT SIZE=-2>link</FONT></A> 直接リンク文字に色を指定すれば直るのですが、スタイルシートでマウスがリンクに触れた時色が変わるという設定が効かなくなるようです。この設定を外さず、任意の色に変える方法はありませんでしょうか。 そのようなサイトを知っている、でも構いません。どうかよろしくお願いいたします。 （powermacＧ4/OS9/IE5/NN4.7/Jedit4.0）
- ベストアンサー
- HTML
お礼
実際教えていただいたものを貼り付けると、文字の色はそのとおりになりました。 自分の中では、何がどうなのかいまいち把握できていません（；；） １から勉強したいと思います。 ありがとうございました。