ホームへ

【html/CSS】下線の色や種類を変える方法【赤線,点線,波線にする】

「aタグの下線の色を変えたい!」

「波線の下線を引きたい!」

下線の色や種類を変える方法を解説します。

下線を引く

text-decoration: underline」を指定すると下線を引くことができます。

前のテキスト下線と文字の色を変える後のテキスト
<style>
.example{
    text-decoration: underline;
    color: red;
}
</style>
<div>前のテキスト<span class="example">下線と文字の色を変える</span>後のテキスト</div>

colorで文字色を変えると下線の色も変わります。

下線の色だけ変えることもできます。

下線の色を変える

text-decoration: underline カラーコード」で指定すると下線の色だけ変えられます。

前のテキスト下線の色を変える後のテキスト
<style>
.example2{
    text-decoration: underline red;
}
</style>
<div>前のテキスト<span class="example2">下線の色を変える</span>後のテキスト</div>

下線の種類(デザイン)を変える

text-decoration: underline 種類」で指定すると下線の種類(デザイン)を変えられます。カラーコードを合わせて指定することもできます。

前のテキスト下線の種類を変える後のテキスト
<style>
.example3{
    text-decoration: underline dashed red;
}
</style>
<div>前のテキスト<span class="example3">下線の種類を変える</span>後のテキスト</div>

種類の値は下記の通りになります。

  • double(二重線)
  • dotted(点線)
  • dashed(破線)
  • wavy(波線)
<ul>
    <li style="text-decoration: underline double red">double(二重線)</li>
    <li style="text-decoration: underline dotted red">dotted(点線)</li>
    <li style="text-decoration: underline dashed red">dashed(破線)</li>
    <li style="text-decoration: underline wavy red">wavy(波線)</li>
</ul>

ただ、種類によっては文字と被って見づらくなります。下線の位置を少し離したいところです。

その方法は下記のとおりです。

下線の位置を変える

text-underline-offset」は下線の位置を指定するCSSです。
指定した値分、文字から下線を離すことができます。

前のテキスト下線の位置を変える後のテキスト
<style>
.example4{
    text-decoration: underline dashed red;
    text-underline-offset:0.5em;
}
</style>
<div>前のテキスト<span class="example4">下線の位置を変える</span>後のテキスト</div>

なお、text-underline-offsetはIEでは効きません。

borderとの違い

border-bottomを使うことでテキストに下線を引き、その下線の色やデザインを変えることができます。

text-decorationの場合

text-decoration
<style>
.example5{
    text-decoration: underline dashed red;
    text-underline-offset:3px;
}
</style>
<span class="example5">text-decoration</span>

borderの場合

border-bottom
<style>
.example6{
    border-bottom: 2px dashed red;
}
</style>
<span class="example6">border-bottom</span>

基本的に同じことができますが、できることできないことに微妙な違いがあります。

bordertext-decoration
文字と線の隙間を広げるpadding-bottom
(IEで効く)
text-underline-offset
(IEで効かない)
文字と線の隙間を詰める×
線の太さを変える×
波線の有無×

文字と線の隙間を広げる

borderではpadding-bottomを使うことで隙間を広げることができます。これはIEでも効きます。

text-decorationでは「text-underline-offset」を使いますが、これはIEでは効きません。

ただしIEはほぼ使われないため無視してもいいかもしれません。

文字と線の隙間を詰める

borderでは先述した通りpadding-bottomを使いますが、これを0にしても線とテキストの隙間は0にはなりません。マイナスも効きません。

text-decorationはもとからくっついているためあとは離すだけです。

線の太さを変える

borderは線の太さを変えられますが、text-decorationでは変えられません。

線の太さを変えたければborderを使いましょう。

波線の有無

text-decorationはwavyで波線を指定できますが、borderでは波線を指定できません。

【まとめ】下線の色や種類を変える方法

  • 下線を引く
    text-decoration: underline
  • 下線の色を変える
    text-decoration: underline カラーコード
  • 下線の種類(デザイン)を変える
    text-decoration: underline 種類
  • 下線の位置を変える
    text-underline-offset

線の太さを変えたいならtext-decorationではなくborder-bottomを使う

以上、下線の色や種類を変える方法でした。

マンガで読める関連記事