【CSS】下線（アウトライン）を引く方法

こんにちは、技術広報のyayawowoです。

Web制作をする際に、
・このテキスト強調したいな…
・この見出しをおしゃれにできないかな？
と思うことはないでしょうか。

そこで今回は、
CSSで下線を引く方法に加え、太さや色付け、点線にする方法を解説したいと思います！
HTMLとCSSのコード例も記述しておりますので、是非ご参考ください。

CSSで下線を引く方法
まとめ

◆ CSS関連のブログ
・CSS（スタイルシート）の書き方【初心者向け】
・【CSS実装予定】カスケードレイヤー「@layer」について

CSSで下線を引く方法

早速、CSSで下線を引く方法を解説します。
方法は大きく3つあり、使いたい線の種類や用途によって、CSSのプロパティが異なります。
最適なものをご選択の上、ご活用ください！

① text-decoration

まずは、CSSで一般的な下線を引きたい時に便利なtext-decorationの使い方です。
text-decorationは、「線の位置」・「線の種類」・「線の色」を指定することができます。

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

では、CSSで下線を引くためにはどのように指定すればよいのでしょうか？
以下の表を参考にしつつ、「線の位置」「線の種類」を指定してみましょう。
「線の色」はお好みの色でお願いします。

指定内容	指定方法	説明
線の位置	none	線なし
	line-through	取り消し線
	overline	上線
	underline	下線
線の種類	solid	一重線
	double	二重線
	dotted	点線
	dashed	破線
	wavy	波線

text-decorationのコード・実行結果例

◆ コード例（HTML）

<html lang=“ja”>
<head>
    <meta charset=“UFT-8”>
    <title>text-decoration 使い方</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>text-decorationの使い方</h2>
    <p class="text-decoration1">一重線の下線（赤）</p>
    <p class="text-decoration2">二重線の下線（青）</p>
    <p class="text-decoration3">点線の下線（緑）</p>
    <p class="text-decoration4">破線の下線（橙）</p>
    <p class="text-decoration5">波線の下線（紫）</p>
</body>
</html>

◆ コード例（CSS）

/* 一重線の下線 */
.text-decoration1 {
    text-decoration:underline solid red
}
/* 二重線の下線 */
.text-decoration2 {
    text-decoration:underline double blue
}
/* 点線の下線 */
.text-decoration3 {
    text-decoration:underline dotted green
}
/* 破線の下線 */
.text-decoration4 {
    text-decoration:underline dashed orange
}
/* 波線の下線 */
.text-decoration5 {
    text-decoration:underline wavy purple
}

◆ 実行結果

See the Pen Untitled by yasuko (@yayafu_) on CodePen.

text-decorationでは、「線の位置」・「線の種類」・「線の色」を指定することで簡単にCSSで下線が引けることが分かりました！

② border-bottom

続いて、border-bottomの使い方です。
border-bottomは、「線の種類」・「線の太さ」・「線の色」を指定することができます。

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

text-decorationとの違いとしては、「線の太さ」が指定できるところです。
「線の種類」は、以下の表を参考にし、実際にコード例と実行結果を見てみましょう。

指定内容	指定方法	説明
線の種類	solid	一重線
	double	二重線
	dotted	点線
	dashed	破線

border-bottomのコード・実行結果例

◆ コード例（HTML）

<html lang=“ja”>
<head>
    <meta charset=“UFT-8”>
    <title>border-bottom 使い方</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>border-bottomの使い方</h2>
    <p><spna class="border-bottom1">2pxの一重下線（赤）</span></p>
    <p><spna class="border-bottom2">4pxの二重下線（青）</span></p>
    <p><spna class="border-bottom3">6pxの点線下線（緑）</span></p>
    <p><spna class="border-bottom4">8pxの破線下線（橙）</span></p>
</body>
</html>

◆ コード例（CSS）

/* 一重線の下線 */
.border-bottom1 {
    border-bottom:solid 2px red
}
/* 二重線の下線 */
.border-bottom2 {
    border-bottom:double 4px blue
}
/* 点線の下線 */
.border-bottom3 {
    border-bottom:dotted 6px green
}
/* 破線の下線 */
.border-bottom4 {
    border-bottom:dashed 8px orange
}

◆ 実行結果

See the Pen Untitled by yasuko (@yayafu_) on CodePen.

太さを変えたい場合は、border-bottomを使うと便利です！

③ background

最後は、backgroundの使い方です。
CSSに詳しい方はご存知かと思いますが、こちらは背景関連のプロパティを指定するものです。
backgroundを活用することで、まるで蛍光ペンで引いたような線をCSSで引くことができます。
その際、linear-gradientの指定が必要ですので注意ください！

background: linear-gradient(transparent 蛍光ペンを引かない線の幅, 線の色 0%);

コード例を見た方が分かりやすいかと思いますので、さっそく…

backgroundのコード・実行結果例

◆ コード例（HTML）

<html lang=“ja”>
<head>
    <meta charset=“UFT-8”>
    <title>background 使い方</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>backgroundの使い方</h2>
    <p><spna class="background1">蛍光ペン幅20%の下線（赤）</span></p>
    <p><spna class="background2">蛍光ペン幅40%の下線（青）</span></p
    <p><spna class="background3">蛍光ペン幅60%の下線（緑）</span></p>
    <p><spna class="background4">蛍光ペン幅80%の下線（橙）</span></p>
</body>
</html>

◆ コード例（CSS）

/* 蛍光ペン幅20%の下線 */
.background1 {
    background: linear-gradient(transparent 80%, red 0%);
}
/* 蛍光ペン幅40%の下線 */
.background2 {
    background: linear-gradient(transparent 60%, blue 0%);
}
/* 蛍光ペン幅60%の下線 */
.background3 {
    background: linear-gradient(transparent 40%, green 0%);
}
/* 蛍光ペン幅80%の下線 */
.background4 {
    background: linear-gradient(transparent 20%, orange 0%);
}

◆ 実行結果

See the Pen Untitled by yasuko (@yayafu_) on CodePen.

　
transparentでは、「蛍光ペンを引かない線の幅」を指定する必要があります。
また、「蛍光ペンを引かない線の幅」は、【100% -「蛍光ペンを引きたい幅」】で簡単に求めることができますよ！

「線の色」は、HTMLカラーコードでも指定することができます。
是非、CSSで自分好みのおしゃれな下線を作ってみてください！

See the Pen Untitled by yasuko (@yayafu_) on CodePen.

まとめ

CSSで下線（アウトライン）を引く方法はいかがでしたでしょうか？
CSSのプロパティは大きく分けて3つあるため、用途に応じてプロパティをお使いください！

改めまして本ブログが、CSSを使う方の一助となれば幸いです。
最後までお読みいただきありがとうございました！

エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。

https://career-recruit.rakus.co.jp/career_engineer/
カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
rakus.hubspotpagebuilder.com
ラクスDevelopers登録フォーム

https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/
イベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！