リンクで表示される下線のスタイルを設定する

ホームページでリンクを表示した場合、デフォルトで下線が表示されます。この下線についてスタイルシートを設定することで色を変更したり線の種類を変更することができます。ここではスタイルシートを使ってリンクの下線のスタイルを変更する方法について解説します。

(2022 年 02 月 20 日公開 / 2022 年 02 月 20 日更新)

リンクの下線を非表示にする

最初にリンクの下線を非表示にしてみます。リンクの下線を非表示にするには a 要素の text-decoration プロパティに対して none を設定してください。( text-decoration プロパティについては「文字の装飾(text-decoration)」を参照されて下さい)。 

a{
  text-decoration:none;
}

例えば次のようなリンクを対象に設定してみます。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<p>
<a href="http://www.example.com/">メニュー1</a>
<a href="http://www.example.com/">メニュー2</a>
<a href="http://www.example.com/">メニュー3</a>
</p>
</body>
</html>

リンクの下線を非表示にする(1)

リンクの下線を非表示にするためにスタイルシートを追加で記述します。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>

<style type="text/css">
a{
text-decoration:none;
}
</style>

</head>
<body>
<p>
<a href="http://www.example.com/">メニュー1</a>
<a href="http://www.example.com/">メニュー2</a>
<a href="http://www.example.com/">メニュー3</a>
</p>
</body>
</html>

作成したページをブラウザで開くと次のように表示されます。

リンクの下線を非表示にする(2)

リンクの下線が非表示になりました。

リンクにマウスを合わせたときに下線を表示する

リンクの下線を非表示にした状態で、リンクにマウスを合わせたときだけリンクの下線を表示するように設定してみます。 a:hover に対して text-decoration プロパティに underline を設定します。 

a{
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

それでは実際に試してみます。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>

<style type="text/css">
a{
text-decoration:none;
}

a:hover{
text-decoration:underline;
}
</style>

</head>
<body>
<p>
<a href="http://www.example.com/">メニュー1</a>
<a href="http://www.example.com/">メニュー2</a>
<a href="http://www.example.com/">メニュー3</a>
</p>
</body>
</html>

作成したページをブラウザで開くと次のように表示されます。

リンクにマウスを合わせたときに下線を表示する(1)

いずれかのリンクにマウスを合わせると、マウスを合わせたリンクだけに下線が表示されます。

リンクにマウスを合わせたときに下線を表示する(2)

リンク毎に異なる色や線の種類で下線を表示する

複数のリンクがある場合に、リンク毎に表示される下線の色や線の種類を変更してみます。それぞれのリンクに異なる class 属性を設定し、各 class に対して異なるスタイルを設定します。

リンクに表示される下線のスタイルは text-decoration プロパティに対して設定できます。今回 1 つ目のリンクは色を赤に設定しました。 2 つ目のリンクは色を緑にして線の幅を 2px に設定しました。 3 つ目のリンクは色を黒にして線の種類を破線に設定しました。 

a.link1{
  text-decoration:underline red;
}

a.link2{
  text-decoration:underline green 2px;
}

a.link3{
  text-decoration:underline dotted black;
}

それでは実際に試してみます。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>

<style type="text/css">
a.link1{
text-decoration:underline red;
}

a.link2{
text-decoration:underline green 2px;
}

a.link3{
text-decoration:underline dotted black;
}
</style>

</head>
<body>
<p>
<a class="link1" href="http://www.example.com/">メニュー1</a>
<a class="link2" href="http://www.example.com/">メニュー2</a>
<a class="link3" href="http://www.example.com/">メニュー3</a>
</p>
</body>
</html>

作成したページをブラウザで開くと次のように表示されます。リンク毎に異なるスタイルが設定されていることが確認できました。

リンク毎に異なる色や線の種類で下線を表示する(1)

-- --

スタイルシートを使ってリンクの下線のスタイルを変更する方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。