【CSS】リンク（aタグ）の下線を消す方法

この記事では，CSSでリンクの下線を消す方法について説明します。

リンクの下線を消す方法

リンクは特に何も指定していない場合，

リンク

↑のように表示されます。下線を消したいaタグに対して，以下のように指定してみましょう。

a {
  text-decoration: none;
}

そうすると，下線が消えます。

リンクにカーソルを合わせた時だけ下線を表示させる方法

カーソルを合わせた時に，リンクの下線を表示させるためには以下のように追加で指定します。

a:hover {
  text-decoration: underline;
}

「:hover」はdivタグやpタグなどでも使えます。

また，「a:hover」は通常のaタグと同じように様々なデザインの指定ができます。

text-decorationで指定出来ること

text-decoration-line　文字装飾の種類

• none　　　　　　  テキストの装飾なし

• underline　　　　  テキストに下線

• overline　　　　　テキストに上線

• line-through　　　テキストの中央に線

text-decoration-color　文字装飾の色

このプロパティで指定できる色は，文字装飾（下線・上線・打消し線・波線など）に適用されます。

色の指定の仕方は，文字や背景の色を指定する時と同じです。

text-decoration-style　文字装飾の線のスタイル

text-decoration-line で指定された線の種類を設定します。

• solid　　　　　    一本線　ー

• double　　　　　二重線　＝

• dotted　　　　　点線　　…

• dashed　　　　   破線　　---

• wavy　　　　　   波線　　〜

text-decoration-thickness　文字装飾の線の太さ

• auto

ブラウザがテキスト装飾線の適切な太さを選択します。

• from-font

フォントファイルに推奨する太さの情報が含まれている場合，その値を使用します。含まれていない場合は，auto が設定されているのと同様になります。

• length

テキスト装飾線の太さを <length> として指定し，フォントファイルの推奨値やブラウザの既定値を無視します。

• percentage

テキスト装飾線の太さを現在のフォントの 1em に対する <percentage> で指定します。パーセント値は相対値として継承されるため，フォントが変わるとそれに合わせて変化します。このプロパティを適用した場合，フォントの大きさが異なる子要素があっても，適用されたボックス全体で太さが一定になります。

まとめ

今回は， CSSでリンクの下線を消す方法について説明しました。

カーソルを合わせた時に表示させる方法や「text-decoration」で指定出来ることを紹介しました。

皆さんもぜひ，実際にコーディングで試してみてください。