スライドショー

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

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

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

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

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

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

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

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

text-decorationの使い方

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

使い方:

text-decoration: 線の位置 線の種類 線の色

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

・線の位置:

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

・線の種類:

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

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

サンプル - HTML:

<!DOCTYPE HTML>
<!DOCTYPE HTML>
<HTML lang="ja">
<head>
    <meta charset="UTF-8">
    <title>下線サンプル</title>

    <link rel="stylesheet" href="main.CSS">
</head>

<body>
    <h2>text-decorationサンプル</h2>
    <p class="simple-border1">CSSで下線を設定する方法</p>
    <p class="simple-border2">CSSで下線を設定する方法</p>
    <p class="simple-border3">CSSで下線を設定する方法</p>
    <p class="simple-border4">CSSで下線を設定する方法</p>
    <p class="simple-border5">CSSで下線を設定する方法</p>
    
</body>

</HTML>

サンプル - CSS:

/************* text-decoration **************/
/* 一重の線 */
.simple-border1 {
    text-decoration:underline solid blue
}

/* 二重線 */
.simple-border2 {
    text-decoration:underline double blue
}

/* 点線 */
.simple-border3 {
    text-decoration:underline dotted blue
}

/* 破線 */
.simple-border4 {
    text-decoration:underline dashed blue
}

/* 波状の線 */
.simple-border5 {
    text-decoration:underline wavy blue
}

実行結果:

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

border-bottomの使い方

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

使い方:

border-bottom:線の種類 線の太さ 線の色 

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

・線の種類

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

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

サンプル - HTML:

<!DOCTYPE HTML>
<!DOCTYPE HTML>
<HTML lang="ja">
<head>
    <meta charset="UTF-8">
    <title>下線サンプル</title>

    <link rel="stylesheet" href="main.CSS">
</head>

<body>
    <h2>border-bottomサンプル</h2>
    <p><span class="border-bottom-1">CSSで下線を設定する方法</span></p>
    <p><span class="border-bottom-2">CSSで下線を設定する方法</span></p>
    <p><span class="border-bottom-3">CSSで下線を設定する方法</span></p>
    <p><span class="border-bottom-4">CSSで下線を設定する方法</span></p>
    <p><span class="border-bottom-5">CSSで下線を設定する方法</span></p>
</body>

</HTML>

サンプル - CSS:

/************* border-bottom **************/
/* 一重線 */
.border-bottom-1{
    border-bottom: solid 2px blue
}

/* 二重線 */
.border-bottom-2{
    border-bottom: double 2px blue
}

/* 破線 */
.border-bottom-3{
    border-bottom: dashed 2px blue
}

/* 点線 */
.border-bottom-4{
    border-bottom: dotted 2px blue    
}

実行結果:

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

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

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

backgroundの使い方

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

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

使い方:

background: linear-gradient(transparent 空白にしたい線の幅, 線の色 0%);

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

サンプル - HTML:

<!DOCTYPE HTML>
<!DOCTYPE HTML>
<HTML lang="ja">
<head>
    <meta charset="UTF-8">
    <title>下線サンプル</title>

    <link rel="stylesheet" href="main.CSS">
</head>

<body>
    <h2>backgroundサンプル</h2>
    <p><span class="marker-border-1">CSSで下線を設定する方法</span></p>
    <p><span class="marker-border-2">CSSで下線を設定する方法</span></p>
    <p><span class="marker-border-3">CSSで下線を設定する方法</span></p>
    <p><span class="marker-border-4">CSSで下線を設定する方法</span></p>
</body>

</HTML>

サンプル - CSS:

/**************** マーカー ****************/
/* 50%下線にマーカー表示 */
.marker-border-1{
    background:linear-gradient(transparent 50%, #ffff66 0%);
}

/* 40%下線にマーカー表示 */
.marker-border-2{
    background:linear-gradient(transparent 60%, #ffcc99 0%);
}

/* 30%下線にマーカー表示 */
.marker-border-3{
    background: linear-gradient(transparent 70%, #ffcccc 0%);
}

/* 20%下線にマーカー表示 */
.marker-border-4{
    background:linear-gradient(transparent 80%, #99ccff 0%);
}

実行結果:

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

ウェブサイト制作スキルで好条件の仕事を獲得したい人は

この記事をご覧の方の中には、CSS及びHTMLを習得して、フリーランスとして案件を請け負い自由に働いていきたいと考えている人もいるのではないでしょうか?

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

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

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

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

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

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

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

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

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

まとめ

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

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

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

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

おすすめコンテンツ

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

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