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及びHTMLを習得して、フリーランスとして案件を請け負い自由に働いていきたいと考えている人もいるのではないでしょうか?

そんなあなたは、CSSやHTMLといったマークアップ言語だけでなく、いわゆる「プログラミング言語」も一緒に学ぶ事をオススメします。なぜならそのほうが、CSS単体よりも好条件な案件を獲得しやすくなりますし、案件自体も多くなるからです。

JavaScriptやPHPなどを筆頭に、CSSとセットで学ぶのにオススメの言語はたくさんありますので、興味がある人はまず「プログラミング言語無料診断」を使ってみてください。あなたにぴったりのプログラミング言語を無料で診断することができます。

そしてプログラミング言語の習得も視野に入れている人は、プログラミングスクールを利用する事も検討するといいでしょう。というのも、HTMLやCSSと比べて、プログラミング言語の習得は一気に難易度が上がるので、独学では挫折してしまう可能性が高いからです。

弊社「侍エンジニア塾」では、あなただけのフルオーダーメイド学習カリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。

結果として、弊社を受講している間にクラウドソーシングからお仕事を受注して納品まで行い、フリーランスエンジニアとしてデビューした方も多々いらっしゃいます。

「知識だけでは仕事に繋がらなかった」38歳接客業からフリーランスデビューできた理由
更新日 : 2019年7月29日

少しでも興味を持った方は、まずはお気軽に弊社の無料体験レッスンを利用してみてください。

入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください!

無料体験レッスンの
予約はこちら

まとめ

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

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

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

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

おすすめコンテンツ

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

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