Webサイトを制作していると、見出しの下に線を引いたり、特定の文字を下線で強調したりしたい場面があります。
そんなときに使えるのが、CSSの**border-bottom**です。要素の下側にだけ枠線を指定することで、下線のようなデザインを作れます。
線の太さや色、種類を自由に変更できるだけでなく、paddingを組み合わせれば文字と線の間隔も調整できます。
この記事では、border-bottomを使った基本的な下線の引き方から、文字幅に合わせる方法やtext-decorationとの違いまで解説します。
border-bottomで文字に下線を引く基本的な方法
border-bottomは、その名前の通り要素の下側にだけ枠線を表示するCSSです。
四辺すべてを囲うborderとは違い、下側だけに線が表示されるため、見出しやラベルなどの装飾にもよく使えます。
border-bottomの基本的な書き方
まずHTMLで、下線を付けたい要素にclassを指定します。
<p class="underline">この文章に下線を引きます。</p>CSSは次のように記述します。
.underline {
border-bottom: 1px solid #333;
}これだけで、要素の下側に線が表示されます。
border-bottom: 1px solid #333;には、3つの指定がまとめて入っています。
| 指定 | 意味 |
|---|---|
1px | 線の太さ |
solid | 線の種類 |
#333 | 線の色 |
つまり、太さ・種類・色を変更することで、下線のデザインを自由に調整できます。
文字と下線の間に余白を作る
下線と文字が近すぎる場合は、padding-bottomを追加します。
.underline {
border-bottom: 1px solid #333;
padding-bottom: 5px;
}padding-bottomは、要素の内側の下方向に余白を作るCSSです。
数値を大きくすると文字と下線の距離も広くなります。線のデザインだけでなく、文字との距離まで調整すると見た目を整えやすくなります。
border-bottomの色・太さ・種類を変更する
基本的な書き方が分かれば、サイトのデザインに合わせて下線をカスタマイズできます。
border-bottomは1行のCSSで複数の指定を変更できるため、まずは太さ・種類・色の3つを覚えておけば十分です。
下線の太さと色を変更する
たとえば、少し太めのグレーの下線にする場合は次のようにします。
.underline {
border-bottom: 3px solid #777;
padding-bottom: 5px;
}最初の3pxが線の太さ、最後の#777が色です。
色にはカラーコードだけでなく、blackやgrayなどの色名、rgb()なども指定できます。
ただし、線を太くするとそのぶん存在感も強くなります。本文より下線のほうが目立ってしまわないように、文字サイズや用途に合わせて調整するのがおすすめです。
実線以外の下線を作る
solidを変更すると、実線以外のデザインも作れます。
.underline {
border-bottom: 2px dashed #333;
padding-bottom: 5px;
}よく使われる指定には次のようなものがあります。
solid：実線dashed：破線dotted：点線double：二重線
基本的な下線ならsolidで十分ですが、補足情報やデザイン上のアクセントとして破線や点線を使うこともできます。
文字の幅だけに下線を引く方法
border-bottomを指定して、「下線が画面の横いっぱいまで伸びてしまった」と困ることがあります。
これはCSSが間違っているとは限りません。pやdiv、見出しなどのブロック要素は、基本的に利用できる横幅まで広がるためです。
inline-blockで文字幅に合わせる
下線を文字の幅だけにしたい場合は、display: inline-block;を組み合わせます。
.underline {
display: inline-block;
border-bottom: 2px solid #333;
padding-bottom: 4px;
}これによって、要素の横幅を文字に合わせやすくなります。
たとえば見出しの文字部分だけに下線を引きたい場合や、短いラベルを装飾したい場合に使いやすい方法です。
文章の一部分だけに下線を引く
文章の中にある特定の文字だけを装飾したい場合は、spanを使えます。
<p>ここが<span class="underline">重要な部分</span>です。</p>.underline {
display: inline-block;
border-bottom: 2px solid #333;
}これなら「重要な部分」の下だけに線を表示できます。
文章全体、見出し全体、一部分だけなど、どこまで線を引きたいのかによってHTMLとdisplayを使い分けると扱いやすくなります。
border-bottomとtext-decorationの違い
CSSで下線を引く方法として、もう一つ代表的なのがtext-decorationです。
どちらも見た目は下線になりますが、仕組みは同じではありません。用途に合わせて使い分けましょう。
text-decorationは文字そのものに下線を付ける
text-decorationを使う場合は、次のように記述します。
.underline {
text-decoration: underline;
}border-bottomが要素の下側に線を付けるのに対して、text-decorationは文字そのものに下線を付けるためのCSSです。
そのため、通常の文章にシンプルな下線を付けるだけならtext-decorationも適しています。
どちらを使えばいい？
用途の違いを簡単に整理すると、次のようになります。
| 方法 | 特徴 | 向いている用途 |
|---|---|---|
border-bottom | 要素の下側に線を付ける | 見出し・ラベル・デザイン装飾 |
text-decoration | 文字そのものに線を付ける | 本文中の文字・リンクなど |
border-bottomはpadding-bottomで線との距離を調整しやすく、要素の幅を利用したデザインもできます。
**見出しなどをデザインとして装飾するならborder-bottom、文字そのものに下線を付けるならtext-decoration**と考えると分かりやすいです。
【まとめ】border-bottomなら下線を自由にデザインできる
CSSで要素の下に線を引きたい場合は、border-bottomを使うことで簡単に実装できます。
基本となるのは次のコードです。
.underline {
border-bottom: 1px solid #333;
padding-bottom: 5px;
}線の太さ・種類・色を変更すればデザインを調整でき、padding-bottomを使えば文字との距離も変更できます。
また、文字幅だけに下線を表示したい場合はdisplay: inline-block;を組み合わせるのがポイントです。
border-bottomは単純なCSSですが、見出しの区切りや情報の強調など、Webサイトのさまざまな場所で使える基本的な表現です。まずは基本形を覚えて、サイトのデザインに合わせて調整してみてください。