CSSでリンクの下線を消し、擬似クラス:hoverでマウスオーバー時の色を変える

今回のお題

クライアント

ナビゲーションも文字の下についている、下線はいらないので無くしてください。マウスカーソルを重ねた時に、文字の色が変わって下線が出てくると良いかな。マウスをのせた時の色は何でも良いです。

• 1.リンクテキストの下線を消す方法
• リンクテキストの下線はtext-decoration
• text-decoration: none;で下線を削除
• text-decorationプロパティを知ろう
• 2.マウスオーバー時の表示を設定する
• 擬似クラス (pseudo classes)とは
• 実習：nav内のリンクに関するCSSを追加

1.リンクテキストの下線を消す方法

テキストを<a>タグで囲うと、初期状態では下線が表示されます。
この下線が表示されないようにしましょう。

リンクテキストの下線はtext-decoration

リンクテキストの下にある線は、CSSのtext-decorationプロパティによって設定されたものです。

検証ツールで見てみましょう。
リンクテキスト、ホームの文字を選択してください。
Styesパネルを見てみると、user agent stylesheet（ブラウザのデフォルトCSS設定）にtext-decorationの指定があります。

プロパティの値はunderline。いかにも下線っぽいですね。

text-decoration: none;で下線を削除

ナビゲーション部分のリンクテキストには下線が表示されないよう、style.cssを使って指定しましょう。

nav a{}の中に、以下のようにスタイル指定を追加してください。

style.css

nav a{
  color: rgb(255, 255, 255);
  text-decoration: none; /* 追加箇所 */
}

ご要望通り、下線が消えました。

text-decorationプロパティを知ろう

せっかくですので、CSSのtext-decorationプロパティについて見てみましょう。

text-decorationは一括指定プロパティ（ショートハンド）で、以下4つの文字装飾に関するCSSプロパティをまとめて設定することができます。

• text-decoration-line（どんな線で装飾するか）
• text-decoration-thickness（装飾線の太さ）
• text-decoration-style（装飾線の種類）
• text-decoration-color（装飾線の色）

検証ツールでは、一括指定プロパティだと値の前に▶が表示れます。
▶をクリックすると、まとめられているCSSプロパティと値が確認できます。

設定できる装飾線と種類は以下の表をご確認ください。

text-decoration-thicknessはpxや%などの単位を使って、太さを設定します。
text-decoration-colorは、全レッスンの色指定方法が使用できます。

text-decoration設定例

リンクテキスト以外でも、text-decorationプロパティを使って装飾ができます。
ちょっとしたアクセントに使えそうですね。

<style>
.test1{
    text-decoration: underline 5px dotted pink;
}
<style>

<p class="test1">
    これはtext-decorationのテストです
</p>

これはtext-decorationのテストです

2.マウスオーバー時の表示を設定する

お題の「マウスカーソルを重ねると文字の色が変わる」は、下の文字のような装飾です。リンク文字やボタンなどで目にしたことのある方も多いのではないでしょうか。

この文字にマウスカーソルを重ねてみてください

このような「マウスカーソルが重なった時」など、特定の状態の時にスタイルを適用させたいときは、CSSの擬似クラスという仕組みを使います。

擬似クラス (pseudo classes)とは

擬似クラスはスタイルを適用する状態を限定するためのものです。

あらかじめ用意されているキーワードをセレクタに付け加える形で利用します。
このキーワードを擬似クラス、もしくは疑似セレクタと呼びます。

擬似クラスを使用するには、半角コロンとキーワード（擬似クラス）を記述します。

「aタグで囲った部分にマウスカーソルが重なった時」という指定をしたい場合は、以下のように書きます。

よく使われる擬似クラス

擬似クラスには沢山の種類があります。
代表的な擬似クラスを紹介します。

※使用できるCSS擬似クラスの一覧は
>擬似クラス - CSS: カスケーディングスタイルシート | MDNをご確認ください。

実習：nav内のリンクに関するCSSを追加

今回のお題である、ナビゲーションのリンク文字まわりを設定してみましょう。
クライアントの要望をまとめると、以下３点の設定が必要です。

• リンクテキストの下線を消す
• マウスオーバーでリンクテキストに下線を表示させる
• マウスオーバーでリンクテキストの文字色を変える

１つ目のリンクテキストの下線を消す、は既に設定できています。
マウスオーバーされた時のCSSを、擬似クラス:hoverを使って書いてみましょう。

style.css（例）

nav a{
  color: rgb(255, 255, 255);
  text-decoration: none;
}

/* 今回の追加箇所 - マウスオーバー時の設定 */
nav a:hover{
  color: rgb(255, 235, 56);
  text-decoration: underline;
}

色は指定されていないので、お好きな色で設定して見てください。
上記CSSの場合は、マウスオーバー時に黄色になります。

text-decorationプロパティでは、線の種類や色も設定できました。
下記のように、:hoverの文字色とは別の色を指定することも可能です。

style.css（例）

nav a:hover{
  color: rgb(255, 235, 56);
  text-decoration: underline double rgb(255, 255, 255);
}