【CSS】アンダーラインの引き方まとめ
はじめに
この記事の概要
こんにちは、株式会社TOKOSのたくまです！
みなさんはコーディング中、文字にアンダーラインを引く際はどのように記述していますか？
おそらくborder-bottomを使用する方が多いかと思います。
border-bottomを使用することで簡単にアンダーラインを引くことは出来ますが、
カスタマイズ性が乏しいため、場合によってはデザインに寄せることが難しいかもしれません、、
実際にアンダーラインを実装するにあたって以下のような悩みを抱えたことはありませんか？
たくま複数行にまたがる下線を引きたいなぁ
たくま2色に分かれた下線を引きたいなぁ
そこで今回は、border-bottomを使用する以外にもCSSでアンダーラインを引く方法についてご紹介します！
対象読者
- CSSを勉強中の初学者の方
- CSSでアンダーラインを引きたい方
アンダーラインを引く方法3選
①border-bottomを使用する
まずは冒頭でもお話したborder-bottomを使用する方法についてあらためてご紹介します！
今回は下のようなテキストにアンダーラインを引いていきます。
コードはこちらになります。
<div class="box">
<p class="text">ここに下線を引きます</p>
</div>.box {
width: 400px;
height: 300px;
padding: 200px 0;
background-color: #fff5e6;
}
.text {
text-align: center;
width: fit-content;
margin: 0 auto;
}早速アンダーラインを引いていきましょう！
上記の.textにborder-bottomを追加します。
.box {
width: 400px;
height: 300px;
padding: 200px 0;
background-color: #fff5e6;
}
.text {
text-align: center;
width: fit-content;
margin: 0 auto;
border-bottom: solid 1px red;
}すると、下のような線が引かれます。
border-bottomを使用する際は、線の種類・太さ・色を指定することで下線のスタイルを変更できます。
今回は線の種類をsolid、太さを1px、色をredにしました。
線の種類はsolidの他にdashed(破線)、dotted(点線)など様々な種類があるので、必要に応じて使い分けてみてください！
border-bottomの詳しい仕様については以下のサイトが参考になります。
border-bottom - CSS | MDN
border-bottom は一括指定の CSS プロパティで、要素の下側の境界を設定します。これは border-bottom-width、border-bottom-style、border-bottom-color の値を設定します。
developer.mozilla.org1点注意していただきたいのは、border-bottomを使用する際、アンダーラインの長さは要素のwidthに依存するので、
テキストにのみアンダーラインを引きたい場合はwidth: fit-content;を指定するようにしてください。
実際にwidth: fit-content;を外すと下のようなアンダーラインになります。
②backgroundを使用する
続いてはbackgroundを使用する方法です！
backgroundを使用することで、蛍光ペンのようなラインを引けたり、複数行にまたがる線を引くことが出来ます！
実際に記述していきます。
.box {
width: 400px;
height: 300px;
padding: 200px 0;
background-color: #fff5e6;
}
.text {
text-align: center;
width: fit-content;
margin: 0 auto;
background: linear-gradient(transparent 48%, red 90%);
}上記の記述で次のような表示になります。
今回は赤い蛍光ペンをイメージしました！
backgroundを使用する際はtransparentの%で線の太さ、色の後の%でかすれ具合を調整しています。
記述は以上なので、border-bottomと同様に簡単に使用できるかと思います。
複数行にまたがる線を引きたい場合は、テキストをspanタグで囲みます。
<div class="box">
<span class="text">
ここに下線を引きます
<br />
複数行にまたがります
</span>
</div>そして、テキストを真ん中に寄せるため、親要素である.boxにtext-align: center;を指定します。
.box {
width: 400px;
height: 300px;
padding: 200px 0;
background-color: #fff5e6;
text-align: center;
}
.text {
text-align: center;
width: fit-content;
margin: 0 auto;
background: linear-gradient(transparent 48%, red 90%);
}これで下のような線を引くことが出来ます。
線の太さなどのスタイルは適宜、調整してみてください！
③疑似要素を使用する
最後は疑似要素を使用する方法です！
こちらが1番カスタマイズ性は高いと思います。
疑似要素を使用するための下準備として、.textにposition: relative;を追記しましょう。
.box {
width: 400px;
height: 300px;
padding: 200px 0;
background-color: #fff5e6;
}
.text {
text-align: center;
width: fit-content;
margin: 0 auto;
position: relative;
}続いて.textにafterを使用して疑似要素を追加していきます。
今回は2色のアンダーラインを作成します。
.box {
width: 400px;
height: 300px;
padding: 200px 0;
background-color: #fff5e6;
position: relative;
}
.text {
text-align: center;
width: fit-content;
margin: 0 auto;
border-bottom: solid 2px red;
}
.text::after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 2px pink;
bottom: -2px;
width: 30%;
}このように記述することで、下のようなピンクと赤の2色のアンダーラインが表示されます。
こちらのアンダーラインは手軽にできて、なおかつオシャレなのでおすすめです！
また、次のように記述することで角が丸くなった柔らかい印象のアンダーラインを作成することも出来ます。
.box {
width: 400px;
height: 300px;
padding: 200px 0;
background-color: #fff5e6;
position: relative;
}
.text {
text-align: center;
width: fit-content;
margin: 0 auto;
}
.text::after {
content: "";
position: absolute;
bottom: -4px;
display: inline-block;
width: 156px;
height: 4px;
left: 50%;
transform: translateX(-50%);
background-color: red;
border-radius: 8px;
}注意点としては、今回はwidthを指定しなくてはいけないので、長さが異なるテキストには同じclass名では使用できない点です。
さいごに
今回はCSSでアンダーラインを引く方法について紹介しました！
シンプルなアンダーラインで良い時はborder-bottomで十分かと思います！
デザインをカスタマイズしたい場合は、backgroundや疑似要素を使用して自分好みの下線を引いていきましょう！
この記事を書いた人
