プログラミング

【CSS】アンダーラインの引き方をご紹介 テキストがグッときわ立ちます

スポンサーリンク

book-and-pen

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

 

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

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

 

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

 

text-decoration

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

See the Pen
text-decoration
by t.h (@tomtom15)
on CodePen.

 

 

 

border-bottom

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

 

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

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

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

See the Pen
border-bottom
by t.h (@tomtom15)
on CodePen.

 

 

 

background

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

See the Pen
background:linear-gradient
by t.h (@tomtom15)
on CodePen.

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

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

 

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

 

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

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

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

 

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

 

 

注意点

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

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

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

 

 

 

まとめ

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

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

  • text-decoration
  • border-bottom
  • background

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

 

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

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

 

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

透明
【CSS】文字はくっきり、背景だけ透過させる opacityとrgbaを使い分けよう

続きを見る

 

スポンサーリンク

-プログラミング
-, , ,

© 2023 サカらいふ Powered by AFFINGER5