RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

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

f:id:tech-rakus:20220207162950p:plain

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

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

そこで今回は、
CSSで下線を引く方法に加え、太さや色付け、点線にする方法を解説したいと思います!
HTMLと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を使う方の一助となれば幸いです。
最後までお読みいただきありがとうございました!


  • エンジニア中途採用サイト
    ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております!
    ご興味ありましたら是非ご確認をお願いします。
    20210916153018
    https://career-recruit.rakus.co.jp/career_engineer/

  • カジュアル面談お申込みフォーム
    どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
    以下フォームよりお申込みください。
    rakus.hubspotpagebuilder.com

  • イベント情報
    会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください!
    rakus.connpass.com

Copyright © RAKUS Co., Ltd. All rights reserved.