【html/CSS】下線の太さ,色,種類を変える方法

2022年05月28日

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

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

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

【結論】
下線を引く
下線の色を変える
下線の種類（デザイン）を変える
下線の太さを変える
下線の位置を変える
borderとの違い
【まとめ】下線の色や種類を変える方法

【結論】

下線は「text-decoration:underline」で指定し、太さ、種類、色を変えられます。

text-decoration: underline 太さ種類色

具体例

text-decoration: underline 5px wavy red

結果

前のテキスト下線の位置を変える後のテキスト

下線は離すことができます。

text-underline-offset:距離

具体例

text-underline-offset:0.5em;

結果

前のテキスト下線の位置を変える後のテキスト

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

下線を引く

「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-decoration: underline 太さ」で指定すると下線の太さを変えられます。

前のテキスト下線の位置を変える後のテキスト

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

下線の位置を変える

「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>

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

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