【CSS】文字を下線（アンダーライン）で目立たせる。コピペOK。

こんにちは。
今回はCSSでテキストにアンダーラインを引く方法をいくつか紹介します。

ブログやLP制作をしていると、テキストを際立たせたいって時がよくあります。
そんな時に使える実装を紹介します。

今回紹介するテクニックは３つ。

・text-decoration で下線を引く
・border-bottom で太線を引く
・background-image でマーカーを引く

text-decorationで下線を引く

これが最も基本的な方法です。

<p class="underline-1">
     <span class="kasen">こんにちは。下線をひきます。</span>
</p>

.kasen{
  text-decoration: underline;
}

結果：こんにちは。下線をひきます。

しかし、最近のサイト・LPでこのタイプの下線は見なくなってきています。なんだかデザイン的に古い感じがしますね。。w
色や下線の種類はいくつかあるのでチェックしてみて下さい。
デメリットとして太さを指定することができません。

厳密には太さを指定するプロパティがあるのですが、現在は一部のfirefoxとsafariでしか対応していない様です。
使用はあまりお勧めしません。

border-bottomで太線を引く

太線を引くにはborder-bottomで表現することができます。
borderに使用できるプロパティも使えるので、色・太さ・線の種類・位置,,,等の調整ができます。

<p class="underline-2">
     <span class="futosen">こんにちは。太線をひきます。</span>
</p>

.futosen{
  border-bottom: 5px solid yellow;
}

結果：こんにちは。太線をひきます。

background-imageで太線を引く

最後はマーカー風のアンダーラインを引く方法です。
こちらのコードを見て下さい。

<p class="underline-3">
   <span class="marker">こんにちは。マーカーをひきます。</span>
</p>

.marker{
  background-image: linear-gradient(transparent 60%, lightblue 0%)
}

結果：こんにちは。マーカーをひきます。

この様に、background-image:linear-gradient(transparent 太さ, 色 透明度) を指定してマーカーを表現します。これはクラス指定しているテキストの背景にグラデーションで色と高さを指定してマーカーで線を引いた様に見せています。
transparent（透明）を別の色に変えてみると、グラデーションの意味がわかると思います。

“太さ”は第２引数のパーセント数値を小さくするとマーカーは太くなっていきます。

.marker01{
  background-image: linear-gradient(transparent 50%, lightblue 0%)
}
.marker02{
  background-image: linear-gradient(transparent 30%, lightblue 0%)
}

background-image:linear-gradientに関してはテキスト自体を素敵な魅せ方もできるので合わせてチェックしてみて下さい。

実はborder-bottomでもマーカー風に線を引くことが可能です。

<p class="underline-4">
   <span class="border-marker">こんにちは。ボーダーでマーカーをひきます。</span>
</p>

.border-marker{
  display: inline-block;
  line-height: 0.3;
  border-bottom: 7px solid pink;
}

結果：こんにちは。ボーダーでマーカーをひきます。

ポイントは、display: inline-block; と line-height: 0.3; です。line-heightでマーカーの位置の設定をしているのですが、文章が長くなり２行以上になった時にはline-heightとborder-widthの調整をする必要があります。

なので個人的にはbackground-imageでマーカーを引く事をお勧めします。

今回はCSSで下線を引く方法を紹介しました。読ませたいテキストを際立たせることはユーザー理解にも繋がります。

是非上手に活用して下さい。