下線（border）の長さを調整できるCSSを知りたい。
文字に下線を引くCSSプロパティや技法はいくつかありますが、正しいやり方を知らないと｢下線が画面いっぱいに広がってしまう｣｢思い通りの長さにならない｣などの問題にぶつかりがちです。
そこで今回は、CSSを使って下線の長さを思い通りに調整する方法について解説します。
CSSで下線の長さを調整する方法
下線の長さを決める際、主に次の2つの状況があると思います。
- 下線を文字の長さに合わせたい
- 下線の長さを自由に決めたい
それぞれ使用するCSSプロパティや使い方が異なるので、詳しく解説します。
下線の長さを文字に合わせる場合のCSS
下線を引く場合、主に次の2つを使うケースが多いと思います。
- text-decoration: underline
- border-bottom
しかし、下線の長さを文字に合わせる場合は、使い方に注意が必要です。
text-decoration
text-decoration: underlineを使うと、文字長さに合わせた下線をシンプルに表現できます。
HTML
<p>下線の長さを文字に合わせる方法</p>CSS
p {
text-decoration: underline;
}上記CSSを記述すると、文字の長さにあわせた下線を引くことができます。
下線の長さを文字に合わせる方法
余談ですが、text-decorationプロパティはシンプルな細い下線だけでなく、マーカーや蛍光ペンのような下線も引くことができます。
興味がある方は、下の記事を参考にしてください。
border-bottom
border-bottomも下線を引く代表的なCSSプロパティです。
太さや色、余白等の指定が簡単にできて便利なのですが、取り扱いには注意が必要です。
なぜなら、pタグやhタグなどのブロック要素にそのまま使用すると、文字の長さが無視されてしまうからです。
例えば、下記はpタグにそのままborder-bottomを指定したケースです。
HTML
<p>下線の長さを文字に合わせる方法</p>CSS
p {
border-bottom: 3px solid #0082B2;
}文字の長さが無視され、ブロックいっぱいにまで下線が広がってしまいました。
下線の長さを文字に合わせる方法
border-bottomを使って、文字の長さだけ下線を引きたい場合は、inline要素に変換します。
やり方は簡単で、CSSにdisplay: inlineを追加すればOKです。
CSS
p {
border-bottom: 3px solid #0082B2;
display: inline; /*追加*/
}すると、文字の長さに合わせた下線になります。
下線の長さを文字に合わせる方法
ちなみに、display: inline-blockでも同じ効果がありますが、改行が入ったり複数行になると表示が崩れるので注意してください。
下線の長さを自由に決めたい場合のCSS
文字の長さに関係なく｢下線の長さを自由に決めたい｣というケースも多いと思います。
たとえば、ホームページなどでよく見る｢装飾用の短い下線｣が代表的ですね。
こんなときは、少し難易度が上がりますが、CSSの疑似要素というテクニックを使います。
HTML
<h2>事業内容</h2>CSS
h2 {
font-size: 40px;
font-weight: bold;
text-align: center;
position: relative; /*positionをrelativeに指定*/
}
/*下線のスタイリング*/
h2::after {
position: absolute; /*positionをabsoluteに指定*/
content: "";
background-color: green; /*下線の色*/
width: 80px; /*線の幅*/
height: 10px; /*線の太さ*/
bottom: -20px; /*線のタテ位置*/
left: 50%; /*線のヨコ位置*/
transform: translateX(-50%); /*線のヨコ位置*/
}疑似要素は、下線の長さや太さだけでなく、自由に位置を決められるのが最大のメリットです。
上記をコピペして、数値を変えながら色々試してみてください。感覚がつかめると思います。
まとめ
今回は、CSSを使って下線の長さを自由に調整する方法をお伝えしました。
下線はCSSの中でもメジャーな装飾なので、ポイントを押さえておきましょう。