ホームページを作成中です。
リンクの上にポインタを置くと、背景色と文字色を変えるようにしたいのですが、
それについてはこちらの以前からの質問で、
テキストエディタの<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.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>
とすれば、出来るはずです。
この回答への補足
丁寧に教えていただいて大変感謝しております。
ただ、テキストエディタのどの部分に教えていただいたものを
貼り付ければよいかわかりません(;;)
また、
<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>
と入れても、標準の時の文字色が青ではなく、クリックしたこと無くても緑色です。
私の入力の仕方が悪いのでしょうか?
ちなみにホームページデザイナーを使っています。
いろいろやってはみたものの、いまいち把握できません(;;)
HTMLについて1から勉強したいと思います。
ありがとうございました。
No.2ベストアンサー
- 回答日時:
★アドバイス
>ただ、テキストエディタのどの部分に教えていただいたものを
>貼り付ければよいかわかりません(;;)
↑
テキストエディタの <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>
以上。
実際教えていただいたものを貼り付けると、文字の色はそのとおりになりました。
自分の中では、何がどうなのかいまいち把握できていません(;;)
1から勉強したいと思います。
ありがとうございました。
No.3
- 回答日時:
質問者さんのやりたいことを解説しているサイトを思い出したので、アドレス入れておきます。
No.2さんの色指定を、スタイルシートでまとめたパターンが紹介されてました。
参考URL:http://web-img.com/col/col-019.htm
CSSとかHTMLとか、そこから把握しないとなかなか難しいですね。
教えていただいたサイトを含めて、もう一度勉強しなおしてみます。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS/日本語のID・クラス名につ...
-
HP作成(ワッパーを中心に)
-
idの中のid指定
-
<span>で2重にかけているものを...
-
セルの高さが変化しない(ワー...
-
「CSSで1つの要素に複数のクラ...
-
CSSの適用を一部だけ除外したい。
-
マウスカーソルを当てた時だけ...
-
CSSで下まで背景色を伸ばす方法
-
cssでIEとFIREFOX(とchrome)の...
-
Bootstrap3でcontainerがずれる...
-
<div align="right"> を css で...
-
CSSのホバーエフェクト
-
1から100までの自然数のうち、2...
-
css 横並びのナビゲーションバ...
-
画像にリンクを張ると画像がず...
-
ポップアップメニューを表のよ...
-
カラープレーンってなんですか?
-
超音波で洗脳。
-
line-height指定で発生する余白...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idの中のid指定
-
CSSに同じclass名がいっぱい‥。...
-
個別にリンクの色を変える方法
-
HTML要素のid/class名の長さに...
-
最近、HTMLのヘッダーをIDで定...
-
CSS, リンクの色を一部変えるに...
-
liリストタグの背景色に色がつ...
-
CSSのクラス名・ID名の指定でワ...
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
スタイルシートで、id属性の中...
-
リンク文字の 一部だけ色を変...
-
外部css定義したclassをht...
-
ページの左右の余白(枠外)に...
-
<span>で2重にかけているものを...
-
CSSでテキストリンクの色を複数...
-
同ページ内でリンクの色を変え...
-
CSSが効かずどのように指定すれ...
-
display:table-cell内でこんな...
-
CSSで下まで背景色を伸ばす方法
おすすめ情報