アンダーライン色々：通常下線、太め、マーカー風、波線、２重線

文字に下線を引く際の色々。

普通の下線: <u>

普通の下線だったら

<u>

で。

<u>下線を引きます</u>

output
    下線を引きます

下線のバリエーション①: border-bottom

下線部を太くしたり、色を変えたり etc.には、

<span style="border-bottom:>

で色々設定してあげると良い。

例えば赤の太線にしたい場合、

<span style="border-bottom" solid 5px red>赤の太線を引きます</span>

output
    赤の太線を引きます

下線のバリエーション②: linear-gradient

マーカーの様な感じで、テキスト部分にかかるように線を引きたい場合は、

<backround: linier-gradient>

を使うと良い。

これについては以前まとめていたので、下記を参照。

例として、黄色のマーカー風にしたい場合。

CSS ▼

.marker-yellow{
background: linear-gradient(
transparent 40%,
#ffffcc 40%);}

HTML ▼

<span class="marker-yellow">黄色の蛍光ペン</span>

output
    黄色のマーカー風

この時はCSSで作成しているけど、

<span style></span>

で、html内で指定することもできる。

下線のバリエーション③: text-decoration-line

下線部の形を変えたい場合には、

text-decoration-line

で指定してあげると良い。

個々では波線と二重線について。

波線

例えば赤の波線にしたい場合。

CSS ▼

.underline_wavy_red {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}

HTML ▼

<p>ここから赤の波線を引きます → <span class="underline_wavy_red">赤の波線です</span>。<p>

output
ここから赤の波線を引きます → 赤の波線です。

二重下線

例えば青の二重下線にしたい場合。

CSS ▼

.underline_double_blue {
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-color: red;
}

HTML ▼

<p>ここから青の二重下線を引きます → <span class="underline_double_blue">青の二重下線です</span>。<p>

output
ここから青の二重下線を引きます → 青の二重下線です。

References