HTMLで表示したテキストリンクを状態に合わせて表示を変える方法について。
#リンクの色を変える
適用するHTMLのコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="linkstyle.css">
<title>テキストリンクの色を変える </title>
</head>
<body>
<p>こちらはQiitaのホームページです→<a href="https://qiita.com/">Qiita</a></p>
</body>
</html>
HTML自体の表示は↓のようなかんじです（実際にはリンク部分に下線あり）
こちらはQiitaのホームページです→Qiita
これに次のCSSを適用します。
@charset "utf-8";
body {
font-family: sans-serif;
font-size: 21px;
}
a {color: #0073bc;}
a:link {color: #0073bc;}
a:visited {color: #02314c;}
a:hover {color: #b7dbf2;}
a:active {color: #4ca4e8;}
ただし、このCSSの上部分
@charset "utf-8";
body {
font-family: sans-serif;
font-size: 21px;
}
この部分はこの記事には直接関係ありませんがCSS全体の設定やフォントの設定を書いています。
<a>のタグのスタイルがこの記事のメインです。
a {color: #0073bc;}
a:link {color: #0073bc;}
a:visited {color: #02314c;}
a:hover {color: #b7dbf2;}
a:active {color: #4ca4e8;}
このCSSでは<a>の4つの疑似クラスについて設定しています。
CSS の擬似クラスPseudo-classesは、セレクターに付加するキーワードであり、選択された要素対して特定の状態を指定します.
a {~}はここでは設定しなかった疑似クラス適用する色を設定しています。
ここで設定している色はこんな感じ→Qiita
a:link {~}では<a>中でもhref属性がついたタグのみに適用されます。
ここで設定している色はこんな感じ→Qiita
a:visited {~}では<a>でリンク先が訪問済みのときに適用されます。
ここで設定している色はこんな感じ→Qiita
a:hover {~}はその要素がホバー状態のときに適用される。
ここで設定している色はこんな感じ→Qiita
a:active {~}その要素上でマウスがクリックされているとき適用される。
ここで設定している色はこんな感じ→Qiita
※このスタイルを適用する順番はこの順番に書かないとうまくいかないことがあるようです
#リンクの下線の表示切替
適用するHTMLのコード（先ほどのものとリンク先のCSSが違うだけです）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="linkstyle2.css">
<title>テキストリンクの色を変える </title>
</head>
<body>
<p>こちらはQiitaのホームページです→<a href="https://qiita.com/">Qiita</a></p>
</body>
</html>
で適用されるCSSがこれ↓です。
@charset "utf-8";
body {
font-family: sans-serif;
font-size: 21px;
}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
a {text-decoration: none;}で通常時のリンクでは下線の表示を消し、a:hover {text-decoration: underline;}要素がホバー状態の時した線を表示するという感じにしています。
色の表示と下線の表示切替は同時に適用もできます。
#参考文献
書籍『いちばんよくわかるHTML５&CSS3デザインきちんと入門』
MDN web docs 「疑似クラス」
ホームページの作り方 リンクのCSS -「a:hover」と「a:visited」