【CSS】テキストがグッときわ立つアンダーラインの引き方３選

今回はCSSでアンダーライン（下線）の引き方をご紹介します。

さっぱりわからない人はサクッと覚えてしまいましょう。

いつも同じ方法でコーディングしている人はバリエーションを増やしましょう。

それでは見ていきましょう。

text-decoration

一番オーソドックスな方法、text-decorationです。
色、形状、太さを指定してお好みにアレンジしましょう。

border-bottomも同じように、色、形状、太さを指定してお好みにアレンジしましょう。

ブロック要素に設定する場合は注意が必要です。

ブロック要素はwidthが100％、つまりブラウザの横いっぱいに広がります。
それにともなって、文章が終わってもどこまでもborder-bottomが続いてしまいます。

ですので下記のコードのとおり、ブロック要素になかにspanタグを入れて、そのspanタグにborder-bottomを設定するといいでしょう。

background:linear-gradientを使うと、マーカー風にアンダーラインを引きことができます。
要素の背景色の割合を調整して、マーカー風に見せるテクニックです。

太いマーカーで解説します。

ポイントは「transparent 30%, yellow 30%」のところです。
transparentは透明、つまり色をつけない。
yellowは黄色。
この２つの値により、背景色に色をつける割合を調整してマーカー風にします。

どのように割合を設定するかというと。

まず、ブロック要素の高さ全体を100％と考えます。

ブロック要素の上端を開始地点（0％）として、下に向かって30％の位置まで透明にします。
コードを書くと　transparent 30%　です。

そして30％の地点以降（要素の下端まで）を黄色にします。
コードは　yellow 30%　です。

マーカーの太さはtransparent（透明）の数値（％）で調整します。
transparent（透明）の数値が少ないほど、マーカーは太くなります。
色の％も透明と同じ数値にするのを忘れずに。

ブロック要素に設定する場合はspanタグを入れて、そのspanタグにアンダーラインを設定しましょう。

ブロック要素は横いっぱいに広がります。
ですので、ブロック要素にアンダーラインを設定すると、文章が終わった後もブラウザの右端までアンダーラインが続きます。

それに、ブラウザ幅を縮めて文章が改行されると、文章全体にアンダーラインがひかれませんので注意してください。

いかがでしたでしょうか。

アンダーラインを引く方法を３つ紹介しました。

必要に応じて使い分けるといいでしょう。

注意点はブロック要素に設定する場合です。
改行の可能性や要素の幅に気を付けましょう。

それではまた次回お会いしましょう。

テキストの装飾関連の記事も紹介しておきます。