aタグリンクの下線をCSSで非表示にする方法

HTML/CSS

今回は、aタグでリンクをつけた際に表示される下線をCSSで削除する方法を紹介します。

aタグでリンクを作成すると基本的には下記の様に青色になり下線が付いてくるかと思います。(これもCSSが読み込まれているだけだが)

TOPページに戻るリンク

テキストリンクの場合はこれで問題無いかと思いますが、下記の様なボタンなどのデザインを含むリンクに下線が付くと非常にダサい感じになります。

TOPへ

この場合は下線は消した方が良いでしょう。

下線を消すCSSプロパティ

下線は「text-decoration」のプロパティで「underline」が付いてしまっています。

この指定を見つけて削除する方法でも良いが、そうすると全体のリンクの「underline」が消えてしまうので、特定のものだけの下線を消したい場合は下記の様に「text-decoration」プロパティを「none」で非表示にしてあげましょう。

style="text-decoration: none;

記事の仕方は以下。

<p>
<a href="https://ka-holidayrefresh.com" style="text-decoration: none;">
TOPページに戻るリンク
</a>
</p>

見た目は下記の様になります。

TOPページに戻るリンク

TOPへ

以上が「aタグリンクの下線をCSSで非表示にする方法」でした。

2020年3月23日HTML/CSSCSS,HTML,WEB

Posted by KT