【CSS】文字を下線（アンダーライン）で目立たせる３つの方法

こんにちは。

ブログやLP制作をしていると、文字を目立たせたいって時がよくあります。
文字を大きくする、太くする意外に効果的なのが下線（アンダーライン）を引くことです。

下線といってもシンプルな下線からマーカー風の下線まで、いくつか表現方法があります。

そこで今回はCSSで文字にアンダーラインを引く際に使えるテクニックを３つ紹介します。

・text-decoration で下線を引く

・border-bottom で太線を引く

・background-image でマーカーを引く

text-decorationで下線を引く

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

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

.kasen{
  text-decoration: underline;
}

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

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

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

border-bottomで太線を引く

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

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

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

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

太線の太さはborder-bottom: ○px solid yellow;の○部分の数字を調整します。
また「solid」の文字を「dotted」に変更すればドットの線を引くことができますし、もちろん色も「yellow」を変更するだけで変更可能です。

結果：こんにちは。紫のドットの線をひきます。

線の位置は「padding-bottom」で調整します。
ただし「padding-bottom」はマイナスの値を持つことができないので、線の位置は下げることしかできません。

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で設定をしています。

ただし文章が長くなり２行以上になった時には使えません。下記のようになります。

<p class="underline-4">
   <span class="border-marker">こんにちは。ボーダーでマーカーをひきます。今日はとても天候が悪く最悪な1日でした。一日中部屋に引きこってダラダラするのもたまにはいいですね。</span>
</p>

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

こんにちは。ボーダーでマーカーをひきます。今日はとても天候が悪く最悪な1日でした。一日中部屋に引きこってダラダラするのもたまにはいいですね。

borderプロパティを使っているので２行に別れていようが一つの線しか出ません。上記の例はline-heightを0.３から１に変更もしています。

改行が起こる長い文でborderを使ってマーカーを表現するのであれば下記のように改行をするたびにクラスを設定してあげなければいけません。

<p class="underline-4">
  <span class="border-marker-2lines">こんにちは。ボーダーでマーカーをひきます。</span><br>
  <span class="border-marker-2lines">今日はとても天候が悪く最悪な1日でした。</span><br>
  <span class="border-marker-2lines">一日中部屋に引きこってダラダラするのもたまにはいいですね。</span>
</p>

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

こんにちは。ボーダーでマーカーをひきます。
今日はとても天候が悪く最悪な1日でした。
一日中部屋に引きこってダラダラするのもたまにはいいですね。

このようにborderでのマーカーを引く際は考慮しないといけにことが多いのに対してbackground-imageでのマーカーは改行のことも考慮せず使えるので便利です😋

<p class="underline-4">
   <span class="marker01">こんにちは。ボーダーでマーカーをひきます。今日はとても天候が悪く最悪な1日でした。一日中部屋に引きこってダラダラするのもたまにはいいですね。</span>
</p>

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

こんにちは。ボーダーでマーカーをひきます。今日はとても天候が悪く最悪な1日でした。一日中部屋に引きこってダラダラするのもたまにはいいですね。

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

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