【すぐ出来る！】CSS『text-decoration: none;』でリンクの下線を消す方法を徹底解説

ａタグなどでリンクを作成した際、デフォルトで下線が付くようになっています。

この下線があっても問題がないデザインにするのであれば何も変更はありませんが、今回はそのリンクの下線が必要のない場合、どのように消すのかを説明していきます。

結論：CSS『text-decoration: none;』でリンクの下線を消す

リンクを作成した際にデフォルトで付く下線は CSSで『text-decoration: none;』を指定させることによって消すことができます。

今回は 『text-decoration: none;』を使用してリンクの下線を消す方法を解説していきたいと思います。

準備：デフォルトで下線の付いているリンクを作る

まずは下線の付いたリンクを作ります。

今回はaタグを利用してリンクを作っていきます。下記のコードを見てください。

<a href="#">トップページはこちら</a>

HTMLでaタグを使用し、『トップページはこちら』というテキストのリンクを作りました。

このようにCSSで何も指定をしないとデフォルトで下線の付いたリンクになってしまいます。

下線の付いたリンクを用意できたところで、 『text-decoration: none;』 を指定してリンクの下線を消していきます。

１:ａタグに『text-decoration: none;』を指定してリンクの下線を消す

CSSで下線の付いたテキストを作るタグをセレクタとして、『text-decoration: none;』を指定することでリンクの下線を消すことができます。

下記のコードを見てください。

a {
    text-decoration: none;
}

CSSでaタグをセレクタとして、プロパティ、値である『text-decoration: none;』を指定しました。

上記の画像を見て分かるように、セレクタとして、リンクを作っているaタグに『text-decoration: none;』を指定することでデフォルトで付いていた下線を消すことができます。

また、リンクの場合、文字の色もデフォルトで黒ではありません。これも同じように『color: black;』を指定するだけで変えることができます。

応用：『hover』を使用してカーソルが重なったタイミングで消した下線を出す

先ほどは 『text-decoration: none;』を指定することで下線を消しましたが、今回は『hover』を使用して消した下線をカーソルが重なったタイミングで出したいと思います。

『hover』についての説明は疑似クラス『hover』の使い方を完全解説で詳しく解説していますので、参考にしてみてください。

１:『hover』を指定したセレクタのプロパティ、値に『text-decoration: underline;』を指定する

前回、 『text-decoration: none;』で消した下線は 『hover』を指定したセレクタのプロパティ、値に『text-decoration: underline;』を指定する ことで再び、下線を出すことができます。

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

CSSで疑似クラス『hover』が指定されたaタグにプロパティ、値として、『text-decoration: underline;』を指定しました。

このように疑似クラス『hover』を指定したセレクタに追記することでカーソルが重なったタイミングで下線を付けることができます。

カーソルが重なっていないタイミングでは先ほどのプロパティ、値が適応されるので下線は消えたままになります。

今回はCSSでデフォルトで表示されているリンクの下線を消すためのプロパティ、値である『text-decoration: none;』について解説していきました。

制作するサイトにリンクの下線が不必要と感じたらこの記事を活かしてデザインを変更してみてください。また、 『hover』を活用して下線を再び出す方法もデザインに合わせて使ってみてください。