下線を引くためのCSSプロパティを3つご紹介！コピペで簡単実装可能！

下線が引かれている部分は自然と視線が誘導され目立つので、文章を目立たせることができます。また、下線があって文字に色が付いているとリンクであることを伝える事ができます。

下線を引く方法はいくつかあり、それぞれに特徴があるので、コピペできるコード付きでわかりやすく解説していきます。

この記事のゴールはこちら。

下線を引く方法

下線を引くためのCSSプロパティを3つご紹介していきます。それぞれに特徴があり使い所が変わってきますので、しっかりと理解していきましょう。

基本的なデフォルトの下線といえば”text-decoration”が使われています。より柔軟なスタイルを適用させた下線を引くために”border-bottom”や”background”を使います。

それぞれ解説していきます。

text-decoration：シンプルな下線を引く

シンプルな下線を引きたい場合はtext-decorationプロパティを使います。

下線を引く最もポピュラーな方法であり、簡単に下線を引くことが出来ます。特にこだわりがなければこの方法だけ覚えておくだけでも問題ないと思います。

基本的な使い方

重要なのは下記の2点です。

text-decorationにunderlineの値を指定することで下線を引くことができ、noneを指定する事で下線を消す事ができます。

See the Pen
QWpmroR by たくぞー｜未経験でも2ヶ月後に30万円稼ぐ (@takuzo0405)
on CodePen.

See the Pen
NWpYMOo by たくぞー｜未経験でも2ヶ月後に30万円稼ぐ (@takuzo0405)
on CodePen.

シンプルな下線が引かれているのが確認できますね。リンクではデフォルトで下線がつきますが、noneを指定する事で下線を消すこともできます。二つ目のリンクには下線が消えている事が確認できました。

使い方応用編

text-decorationで指定できるものは、線の“位置”、”形状”、”色”の3種類です。下記のように半角スペースで区切って指定します。

See the Pen
abJKOON by たくぞー｜未経験でも2ヶ月後に30万円稼ぐ (@takuzo0405)
on CodePen.

また、それぞれの値は好きな順序で指定することができ、省略することも可能です。省略された場合は初期値が設定されます。

See the Pen
ZEeRGbE by たくぞー｜未経験でも2ヶ月後に30万円稼ぐ (@takuzo0405)
on CodePen.

線の位置の主な指定方法

線の形状の主な指定方法

線の色の主な指定方法

色の指定方法は、カラーネーム(例：red)や、カラーコード(例：#fff,#d4d4d4)で行います。

かなり多くの色が存在していますので、原色大辞典のようなサイトを参考にコードを取得すると良いでしょう。

実際に書いてみよう

いくつか例を出して線を書いてみましょう。

青色の波線を文字の下に引く

See the Pen
YzZvyXR by たくぞー｜未経験でも2ヶ月後に30万円稼ぐ (@takuzo0405)
on CodePen.

デフォルトの色と線で文字の上に1本線を引く

See the Pen
yLMEYYV by たくぞー｜未経験でも2ヶ月後に30万円稼ぐ (@takuzo0405)
on CodePen.

赤色の2重取り消し線を引く

See the Pen
gOmKaaN by たくぞー｜未経験でも2ヶ月後に30万円稼ぐ (@takuzo0405)
on CodePen.

「text-decoration」の問題点

簡単な下線や取り消し線などを引く場合は「text-decoration」が最も簡単です。ただ、文字と下線がくっついるのが若干気になるところ。現状、下線と文字の距離を自由に変更できる値は用意されていないので調整することが出来ません。

また、線の太さをを自由に変えることも出来ません。

これらの問題点を解消したい場合は”text-decoration”ではなく、後述する”border-bottom”を使うと解決できます。

豆知識：線の位置・形状・色の3つのプロパティは個別に存在する

“text-decoration”は、線の”位置”、”形状”、”色”の3種類を同時に指定することができますが、それぞれ専用のプロパティも用意されているので、個別に指定することもできます。

基本的には”text-decoration”でまとめて書く方が楽なのでそちらを使えば問題ありません。

親要素のスタイルを継承している子要素の「下線の色だけを変えたい」、という場合などに個別のプロパティを使うと良いでしょう。

border-bottom：太さや文字間の調整が可能

“border-bottom”を使うことで、”text-decoration”では出来なかった線の太さの変更や、文字と下線の距離の調整が出来るようになります。

基本的な使い方

“border-bottom”は線の”形状”、”太さ”、”色”の3つの値を指定することが出来ます。それぞれ半角スペース区切りで指定し、初期値のままでいい場合は省略も可能です。

See the Pen
wvJXMwJ by たくぞー｜未経験でも2ヶ月後に30万円稼ぐ (@takuzo0405)
on CodePen.

線の形状の主な指定方法

線の形状の種類は”text-decoration”と似ていますが、波線が用意されていないので注意しましょう。

文字と線の間を離す方法

文字と下線の隙間に関しては“padding-bottm”で変更することが出来ます。

実際に書いてみよう

3pxの緑の一本線

See the Pen
oNZybEb by たくぞー｜未経験でも2ヶ月後に30万円稼ぐ (@takuzo0405)
on CodePen.

文字と線の間の隙間を離す

See the Pen
XWMYXZw by たくぞー｜未経験でも2ヶ月後に30万円稼ぐ (@takuzo0405)
on CodePen.

文字と線の間に隙間ができました。paddingは要素の外側にある空間を設定する事ができるプロパティなので、この値を調整すれば文字と線の隙間を調整する事ができます。

background：蛍光ペンのような線を引く

“background”プロパティは主に背景色を指定するためのプロパティですが、背景色にグラデーションを指定し、一部を透明にすることで蛍光ペンで引いた様なスタイルを作ることが出来ます。

基本的な使い方

蛍光ペンのような表現をさせたい場合、下記のように記述します。

See the Pen
RwpJabL by たくぞー｜未経験でも2ヶ月後に30万円稼ぐ (@takuzo0405)
on CodePen.

実際に書いてみよう

“色の割合”には同じ値を％で指定しましょう。”transparent”が透明の領域の大きさを表していて、この値が大きいほど透明部分が大きくなり線は細くなります。

ちなみに、”色の割合”を別々の数値にすると、グラデーションになります。

See the Pen
poeKyvm by たくぞー｜未経験でも2ヶ月後に30万円稼ぐ (@takuzo0405)
on CodePen.

下線というよりは文字の後ろに色を付けるイメージです。まるで蛍光ペンを引いたように見えることから、WEBサイトではよく使われる方法です。

重要な部分に使うと目立たせる事ができますが、使いすぎると煩わしくなってしまうので、重要な箇所に絞って使いましょう。

まとめ

ここまで3パターンの下線の引き方をお伝えしてきました。

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

実装しやすさ重視にするか、カスタマイズした線にするのか、ご自身のお好みに合わせてプロパティを使い分けてみてください。

「正しいコードが書けていないかも」
「ホームページ制作の独学に限界を感じている」
「HTML・CSSをマスターして単価を上げたい」

そんなお悩みをこれ一つで解決！
本格ホームページを作りたい方はこちら

『Web Sense』公式ページ