CSSで下線を引く方法とは?二重線・破線・波線・蛍光線など徹底解説!

皆さんは、CSSで下線を引く方法を知っていますか?文章を強調したいとき、見出しをおしゃれなデザインにしたいときなど、下線を使うケースは多いですよね。そこで今回は、

  • CSSで下線を引くための3つの方法とは?
  • 太さを指定して下線を引く方法
  • 二重線・破線・波線・蛍光マーカーを引く方法

といった基礎的なことから、といった応用的な方法まで、徹底的に解説します!

CSSで下線を引くための2つの方法とは?

CSSで下線を引く方法は、大きく分けて3つあります。

  • 「text-decoration」プロパティ
  • 「border-bottom」プロパティ
  • 「background」プロパティ

用途に応じて使い分けるのがおすすめなので、それぞれ詳しく解説しますね!

text-decorationの使い方

まずは、text-decorationの使い方について解説します。

使い方:

「線の位置」「線の種類」については、それぞれ設定値があるのでまとめました!

・線の位置:

No線の位置説明
1none線なし
2line-through取り消し線
3underline下線
4overline上線

・線の種類:

No線の種類説明
1solid一重線
2double二重線
3dotted点線
4dashed破線
5wavy波線

二重線、点線、破線、波状線など一通りの線がそろっているため、シンプルな下線を引来たい場合は、text-decorationプロパティがおすすめです!デザインが気になる方もいると思うので、サンプルコードを用意しました。

サンプル – HTML:

サンプル – CSS:

実行結果:

このように、簡単に下線を付けることができます。

border-bottomの使い方

次に、border-bottomの使い方について解説します。使い方は、次のとおりです。

使い方:

「線の種類」について、こちらも一覧にまとめました。

・線の種類

No線の種類説明
1none線なし
2solid一重線
3double二重線
8dashed破線
9dotted点線

また、text-decorationと比較すると、太さの指定ができますよね。太さを変えると下線に強弱をつけることができるので、text-decorationプロパティよりも表現の幅が広がります!こちらもサンプルコードを用意しました!

サンプル – HTML:

サンプル – CSS:

実行結果:

このように、下線を引くことができます。

また、太さ以外にも、text-decoration・border-bottomには違いがあります。

border-bottomプロパティは文字と下線の間に余白があるため読みやすく、text-decorationプロパティは波線が使えます。用途に応じて使い分けてみてくださいね!

backgroundの使い方

つぎに、backgroundの使い方について解説します。backgroundはもともと線を引くためのプロパティではなく、背景関連のプロパティをまとめて指定するためのプロパティです。

backgroundでlinear-gradientを使って色を設定することで、蛍光マーカーのような下線を引くことができます!使い方は、次のとおりです。

使い方:

「空白にしたい線の幅」が少しわかりにくいかもしれませんが、70%を指定すると30%の蛍光マーカーが下線になるイメージで、「100% – 指定した%」が表示されます。こちらも、サンプルコードを用意しました。

サンプル – HTML:

サンプル – CSS:

実行結果:

上から順に50%~20%まで、マーカーの表示幅を変更したサンプルです。このように、指定した幅で蛍光マーカーのような下線を引くことができます。おしゃれな下線として蛍光マーカーを使いたい場合は、こちらがおすすめです!

まとめ

今回は、CSSで下線を引く方法について解説しました。文字を強調する下線ひとつとっても、今回解説したような様々な方法があります。

ただ、大事なのは、「アプリ・サービスを使うユーザにとって見やすいデザインであること」です。さまざまな下線を試しつつ、画面にあった下線を使ってみてくださいね!

最短でプログラミングを習得したい方へ

元々ITリテラシーのある方やプログラムの学び方がわかっている方は独学で習得することも可能でしょう。

ただし、実際の学習期間中はつまづいている時間がほとんどです。

「もう挫折したくない」
「本業と両立しながら、好きな時間で自分のペースで勉強を続けていきたい。」
「自分だけのカリキュラムで効率的に勉強したい」

そんな方はお気軽に侍エンジニア塾までご相談ください。

弊社では、

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

までをひと通り学習できます。

まずは無料体験レッスンで、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

挫折しない学び方や、通常1000時間以上かかる学習時間を1/3にする方法などより具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta1

LINEで送る
Pocket

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説