今回の記事では，CSSでリンクの下線を消す方法について説明します。
デザイン的にリンクの下線を消したいな。あと，
リンクにカーソルを合わせた時だけ下線を出したいな。
このような時に使える方法です。
リンクの下線を消す方法
リンクは特に何も指定していない場合，
リンクと表示されます。下線を消したいaタグに対して，以下のように指定してみましょう。
a {
text-decoration: none;
}そうすると，
リンク下線が消えました。
リンクにカーソルを合わせた時だけ下線を表示させる
カーソルを合わせた時に，リンクの下線を表示させるためには以下のように追加で指定します。
a:hover {
text-decoration: underline;
}上のリンクにカーソルを合わせてみてください。その時に下線が表示されることが分かると思います。
text-decorationで指定出来ること
text-decoration-line 文字装飾の種類
text-decoration-color 文字装飾の色
このプロパティで指定できる色は，文字装飾（下線・上線・打消し線・波線など）に適用されます。
色の指定の仕方は，文字や背景の色を指定する時と同じです。
text-decoration-style 文字装飾の線のスタイル
text-decoration-line で指定された線の種類を設定します。
text-decoration-thickness 文字装飾の線の太さ
auto
ブラウザがテキスト装飾線の適切な太さを選択します。
from-font
フォントファイルに推奨する太さの情報が含まれている場合，その値を使用します。含まれていない場合は，auto が設定されているのと同様になります。
<length>
テキスト装飾線の太さを <length> として指定し，フォントファイルの推奨値やブラウザの既定値を無視します。
<percentage>
テキスト装飾線の太さを現在のフォントの 1em に対する <percentage> で指定します。パーセント値は相対値として継承されるため，フォントが変わるとそれに合わせて変化します。このプロパティを適用した場合，フォントの大きさが異なる子要素があっても，適用されたボックス全体で太さが一定になります。
まとめ
今回は， CSSでリンクの下線を消す方法について説明しました。
カーソルを合わせた時に表示させる方法や「text-decoration」で指定出来ることも紹介しました。
リンクはよく使うので，どのような表示の仕方があるかをしっかりと知っておきたいと思います。
皆さんもぜひ，実際にコーディングで試してみてください。
コメント