HTMLでURLリンクやテキストに下線をつける・消す方法【様々なデザインも】

HTMLの勉強をしていて

「URLリンクのアンダーライン（下線）ってどうやって消せばいいの？」

「HTMLのURLリンクに動きのある下線をつけたい」

と思うことはありませんか？

URLリンクの下線という細かい部分ですが、少し変えるだけで意外と全体の印象が変わる場合もあります。

そこで今回は、

を知ることができる内容となっています。

逆にリンクの下線を消したい場合などの対応についても解説していますので、ぜひ最後まで見てくださいね。

HTMLのURLリンクの下線をカスタマイズしてみよう！

ブラウザ上でURLリンクを表示するには、HTMLのaタグを使用します。

そのリンクに下線を引いたり、消したりするためにはどうしたら良いのでしょうか？

ここでは、URLリンクの下線の基本的な指定方法について解説します。

URLリンクに下線をつける方法

HTMLでURLリンクをaタグで指定した場合、デフォルトではすでに下線が引かれた状態になっています。

例えば、以下のようにHTMLを記述した場合、

<a href="https://web-camp.io/magazine/">WEBCAMP MEDIA</a>

ブラウザでは以下のように表示されます。

ブラウザ上でリンクをクリックする前も、クリックした後も同じように下線は引かれている状態です。

URLリンクの下線を消す方法

URLリンクの下線を消したい場合は、CSSで以下のようにスタイリングします。

a {
  text-decoration: none;
}

text-decorationとは、CSSのテキストの下線の表示を設定するプロパティです。

aタグでは、このtext-decorationの指定がデフォルトで「underline」になっているため、何も指定しなくとも下線が引かれているのです。

リンクの下線を消す場合には、noneを指定しましょう。

URLリンクの下線が消えない時の対処法

「text-decorationプロパティにnoneを指定したのに、なぜか下線が消えない…」

という場合には、以下のような原因が考えられます。

CSSは下に記述されているスタイルほど優先順位が高くなります。

まず最初に、「text-decoration:none;」を指定した後に、下線を表示する指定をしていないか確認しましょう。

また、そもそもtext-decorationプロパティを指定している場所が違う可能性があります。

例えば以下のような場合は、親要素に指定しているためリンクの下線はそのまま表示されてしまいます。

<!-- HTMLコード -->
<div class="test">
  <a href="https://web-camp.io/magazine/">WEBCAMP MEDIA</a>
</div>

/* CSSコード */
.test {
  text-decoration: none;
}

上記の場合は、親要素ではなくaタグに直接指定しましょう。

/* CSSコード */
.test a {
  text-decoration: none;
}

それでも下線が消えない場合は、hoverでtext-decoration: underline;を指定している可能性が高いです。

マウスホバーした際も下線を表示させたくない場合は、hoverのtext-decoration: underline;指定を削除しましょう。

HTMLのテキストに下線をつける方法

URLリンクの下線だけでなく、HTMLのテキストにも下線をつけることができます。

具体的には、以下のように下線をつけたいテキストをspanタグで囲い、CSSのtext-decorationを指定します。

<!-- HTMLコード -->
<p>HTMLのテキストに<span>下線</span>をつけます</p>

/* CSSコード */
span {
  text-decoration: underline;
}

上記の場合は「下線」部分に下線が表示されます。

spanタグはひとかたまりの範囲として定義している要素なので、何も指定しなければそのままテキストのみが表示されます。

CSSでHTMLのURLリンク下線をデザインする

URLリンクの下線は、表示・非表示だけでなく、CSSでスタイリングすることで様々なデザインをすることが可能です。

今回は、以下の4つのパターンをデザインする方法を解説します。

簡単に実装できるデザインに絞りましたので、初心者の方もぜひチャレンジしてみてくださいね。

1.リンク下線の色を変える方法

text-decoration-colorプロパティを指定することで、リンクの下線のみ色を変えることができます。

<!-- HTMLコード -->
<div class="link1">
  <a href="#">リンクの下線を黒色にします</a>
</div>

<div class="link2">
  <a href="#">リンクの下線を赤色にします</a>
</div>

<div class="link3">
  <a href="#">リンクの下線を緑色にします</a>
</div>

/* CSSコード */
.link1 a {
  text-decoration-color: black;
}

.link2 a {
  text-decoration-color: red;
}
.link3 a {
  text-decoration-color: green;
}

また、aタグはbodyタグで全体的にテキストの色を指定しても、デフォルトの青色のままです。

text-decoration: none;を指定している場合でも同じなので、リンクテキストの色も変えたい場合は、aタグで指定しましょう。

2.下線の種類を変える方法

text-decoration-styleプロパティを指定することで、リンク下線の種類を変えることができます。

<!-- HTMLコード -->
<div class="link1">
  <a href="#">リンクの下線を黒色の点線にします</a>
</div>

<div class="link2">
  <a href="#">リンクの下線を赤色のなみなみ線にします</a>
</div>

<div class="link3">
  <a href="#">リンクの下線を緑色の上下線にします</a>
</div>

/* CSSコード */
.link1 a {
  text-decoration-color: black;
  text-decoration-style: dotted;
}

.link2 a {
  text-decoration-color: red;
  text-decoration-style: wavy;
}

.link3 a {
  text-decoration: underline overline green;
}

dottedは点線、wavyはなみなみの線、overlineは上下に線を表示する指定です。

また、list3のように一つずつではなく、一度にすべての指定をすることも可能です。

一般的には

text-decoration: underline（none） 種類　色;

という順番で記述します。

3.カーソルを合わせた時に下線を表示する方法

マウスホバーで下線を表示したい場合は、hoverセレクタを使用します。

<!-- HTMLコード -->
<div class="link1">
  <a href="#">リンクにカーソルが合った時に下線を表示します</a>
</div>

/* CSSコード */
.link1 a {
  text-decoration: none;
}

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

上記のコードの場合、通常表示ではリンクに下線はなく、リンクにカーソルが合わさった瞬間に下線が登場するという指定になっています。

URLリンクの下線を自由にカスタイマイズしてHTMLやCSSの幅を広げよう

URLリンクの下線をデザインしたり、動きをつけたりすることで、ユーザーのクリック率が向上すると言われています。

今回ご紹介した色や線の種類を変える以外にも、画像を使用したりボタンを作成したりすることで、クリックしたくなるURLリンクにすることが可能です。

以下は今回の記事のまとめです。

リンク下線を指定するtext-decorationプロパティは、使い方次第で様々なデザインが可能です。

ぜひ、色々試してみて自分だけのリンク下線をデザインしてみてくださいね！

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！