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

CSS

今回の記事では,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」で指定出来ることも紹介しました。

リンクはよく使うので,どのような表示の仕方があるかをしっかりと知っておきたいと思います。

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

コメント