CSS リンクボタンの下線を消す方法
リンクボタンの下線を消す方法を紹介します。
以下は何もスタイルを指定していない状態のリンクボタンです。
ブラウザによって多少は異なりますが、青色で下線の付いたテキストになります。
<a href="#">リンクボタン</a>文字に下線を付けるスタイルはtext-decoration: underline;です。
リンクボタンにはこのスタイルが自動で適用されていると考えてください。
下線を消す
下線を消すには、このtext-decorationのスタイルをnoneに変更します。
<a href="#" style="text-decoration: none;">リンクボタン</a>マウスオーバーしたときのみ下線を表示する
下線を消すと一見リンクボタンかどうかわからなくなってしまいます。
そのため、マウスオーバーしたときのみ下線を表示したい場合があります。
CSS マウスオーバーしたときのみスタイルを適用するで紹介したように、hoverの擬似クラスを使用します。
擬似クラスを使用する場合はstyleではなくclassで指定したほうがやりやすいです。
<style>
.link {
text-decoration: none;
}
.link:hover { /*擬似クラス*/
text-decoration: underline;
}
</style>
<a href="#" class="link">リンクボタン</a>