【CSS】文字に色々なデザインの下線を引く（点線・波線・二重線・蛍光ペン風など）

今回は文字にさまざまなデザインの下線の引き方をまとめます。おしゃれで文章の強調に使えるような下線も紹介していくので、気に入ったものがあれば是非コピペして使ってみてください。

1.【初心者向け】下線を引く手順

はじめにCSSの指定方法を解説するので、すでにご存知の方は読み飛ばして頂ければと思います。
スキップ

文字に下線を引く方法は大きく分けて、以下の2パターンがあります。

1つずつ解説していきます。

方法1: HTMLに直接書く（インライン）

いちばん簡単な方法です。以下のように指定します。

<span style="下線のCSSコード">下線を引きたい文字</span>

①下線を引きたい部分をspanタグで囲って ②style=""の中にCSSコードを書けば良いわけですね。後ほど各下線のCSSコードを紹介していきますので気に入ったものをコピペして入れましょう。たとえば、いちばん無難な下線を引くことができるtext-decoration: underline;をこの中に入れてみましょう。

<span style="text-decoration: underline">例文です</span>

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

方法1のデメリット

ただし、この方法には少しデメリットがあります。1つめに、下線を引きたい文字がある度にいちいちタグ内にstyle="text-decoration..."と書かなければならず、やや面倒です。２つめに、HTMLコード内にstyle="..."が入ったタグが増えてくると「後から文字の加飾をまとめて変えたい」と思ったときにも1つ1つ書き直さなければならなくなります。

方法2：HTMLでclass名をつけ、CSSで指定

この方法を取った方が後々何かと楽になります。手順は「HTMLコードでclass名だけをつける⇒CSSでそのclass名に対して下線の指定をする」という流れになります。

<span class="under">例文です</span>

.under {
  text-decoration: underline;
}

class="〜"の中のclass名は、今回はunderとしましたが、自分の好きなものでOKです。CSSではclass名は「.◯◯」というようにドット（.）を前につけて指定します。詳しくは以下の記事を読んでみてください。

この方法であれば、同じ下線を引きたいときには以下のように使い回すことができます。

<p>例文：<span class="under">この部分</span>と<span class="under">この部分</span>に下線をひきたいと思います。</p>

.under {
  text-decoration: underline;
}

↑ここではpタグ内の文章で指定しましたが、見出しなどでも使うことができます。

この方法であれば「後からまとめて下線のデザインを変えたい」というときもCSSコードだけを変えれば良いので楽ですね。CSSを書く場所については、こちらの記事で詳しく解説しています。

2. 普通の下線

ここからは色々なデザインの下線の引き方を紹介していきます。

2-1. text-decorationを使う

text-decoration: underline;

さきほども紹介しましたが、この指定では無難な下線を引くことができます。

<p>これは<span class="under">ただの例文</span>です。</p>

.under {
  text-decoration : underline;
}

初期状態の線の色＝文字色

下線の色を別に指定しなければ、文字色と同じになります。そのため、以下のように文字色を変えると線の色も変わります。線だけ別の色にしたい場合はtext-decoration-colorを指定できます。

<p>これは<span class="under">ただの例文</span>です。</p>

.under {
  color: orange;
  text-decoration : underline;
}

現在はtext-decoration-thicknessで下線の太さも指定できます。例えばtext-decoration-thickness: 3px;です。以下では要素の下辺に線を引くborder-bottomの方法も紹介します。

2-2.border-bottomを使う

border-bottom: solid 2px orange;3つの値の間は半角スペースで区切る↑

borderは要素のまわりに線を引くためのプロパティです。

プロパティ名を「border-bottom」にすると下線を引く指定になります。太さ（◯px）と色は自分の好きなように変えましょう（色はカラーコード表などで使いたい色をコピペしてくるのが良いかと思います）。 例として太さ3pxで、色「#87CEFA」の下線を引いてみたいと思います。

<p>これは<span class="under">ただの例文</span>です。</p>

.under {
  border-bottom: solid 3px #87CEFA;
}

このように自分の好きな太さ＆好きな色の下線を引くことができます。

3. border-bottomで様々な線の種類を選ぶ

3-1. 点線にする

border-bottom: dotted 3px orange;

border-bottomのsolidを「dotted」に変えることで点線にすることができます。太さも色も自由に変えることができます。 たとえば、太さ2pxで、色「#87CEFA」の点線の下線を引いてみます。

<p>これは<span class="under">ただの例文</span>です。</p>

.under {
  border-bottom: dotted 2px #87CEFA;
}

3-2. 破線にする

border-bottom: dashed 2px orange;

border-bottomで線の種類をdashedに指定すれば、破線になります。さきほど同様に、太さも色も自由に変えることができます。 たとえば、太さ1pxで、色「#87CEFA」の破線を引いてみます。

<p>これは<span class="under">ただの例文</span>です。</p>

.under {
  border-bottom: dashed 1px #87CEFA;
}

3-3. 二重線にする

border-bottom: double 6px orange;

border-bottomで線の種類をdoubleに指定すれば、二重線になります。指定した太さには2本の線とその間の隙間が含まれるので、少しpx数を大きめにしましょう。 たとえば、太さ6pxで、色「#87CEFA」の二重線を引いてみます。

<p>これは<span class="under">ただの例文</span>です。</p>

.under {
  border-bottom: double 6px #87CEFA;
}

4. 蛍光ペン風

蛍光マーカーで引いたような線を引くこともできます。

4-1. 文字の下半分だけ引く

background: linear-gradient(transparent 50%, yellow 50%);

下半分だけ引きたいときはこのコードを使いましょう。なお「yellow」の部分を好きな「色名」や「色コード」に変えることで、蛍光ペンの色を変えることができます。例として色を「#a8eaff」に変えてみましょう。

<p>これは<span class="under">ただの例文</span>です。</p>

.under {
  background: linear-gradient(transparent 50%, #a8eaff 50%);
}

4-2. ペンを細くする

background: linear-gradient(transparent 70%, yellow 70%);

↑２つの%の値を合わせて大きくするほど、蛍光ペン線が細くなります。50%よりも70%、70%よりも90%の方が線が細くなるわけですね。自分の好みで調整すると良いでしょう。 試しに70%にしてみます。線の色は今度はピンクっぽくしてみます。

<p>これは<span class="under">ただの例文</span>です。</p>

.under {
  background: linear-gradient(transparent 70%, #ff99ab 70%);
}

↑かろうじて文字にかかってくるくらいの細さになりましたね。逆に太くしたいときは、２つの%の値を20%や30%くらいに小さくしましょう。

4-3. 文字全体に蛍光ペンを引く

background: linear-gradient(transparent 0, yellow 0);

２つの値を0にすれば、文字全体に対して蛍光ペンで引いたような見た目にすることもできます。今度は黄緑っぽい色を指定してみます。

<p>これは<span class="under">ただの例文</span>です。</p>

.under {
  background: linear-gradient(transparent 0, #8effa1 0);
}

5. オシャレなデザインの下線

5-1. 波線を引く

background:url(波線画像のURL) bottom repeat-x; background-size: 20px;

現在はtext-decoration: underline wavy;で画像なしの波線も引けます。ここでは、以下の保存画像を繰り返して独自の波形を使う方法を紹介します。

手順１：波線画像を手に入れる

波線画像をいくつか作ってみました。ダウンロードしてご自由にお使い頂いてOKです。 商用利用もOKですが、二次配布はお控えください。また画像の直リンクはご遠慮ください。気に入った波線があれば「ダウンロード」をクリックして、画像を右クリックで保存しましょう。

• 黒の波線 ⇒ ダウンロード
• グレイの波線 ⇒ ダウンロード
• オレンジの波線 ⇒ ダウンロード
• 水色の波線 ⇒ ダウンロード
• むらさきの波線 ⇒ ダウンロード
• ピンクの波線 ⇒ ダウンロード
• 薄緑の波線 ⇒ ダウンロード

手順２：ブログやサーバーにアップロードしてURLを取得

画像をブログやサーバーにアップロードし、画像のURLを取得します。これはWebサイトの運営方法によって異なります。

たとえばWordPressの場合、記事に画像を挿入するときと同じように画像をアップロードします。画像は公開当時の画面です。現在のWordPressではメディアライブラリの添付ファイル詳細などからファイルのURLを取得してください。

はてなブログならはてなフォトライフに写真をアップロードして、画像のURLを取得するのが良いですね。方法は「画像のURLの調べ方」が参考になるかもしれません。

手順３：URLを波線用のコードの中に貼付け

以下のコードの()内に、自分でアップロードした画像のURLを貼れば完成です。後のCSS例の./wave-skyblue.pngはCSSファイルと同じフォルダーに保存した場合の相対URLです。インラインCSSではHTMLのURLを基準に解決されるので、配置場所に合わせて書き換えてください。サルワカの画像URLへ直リンクするコードにはしないでください。

background:url(ここに画像のURLを貼付け) bottom repeat-x; background-size: 20px;

では実際に青の波線を引いてみましょう。

<p>これは<span class="underline">ただの例文</span>です。</p>

.underline {
  background: url("./wave-skyblue.png") bottom repeat-x; 
  background-size: 20px;
}

background-sizeのpx数を大きくすれば波線が大きく、px数を小さくすれば波線が小さくなります。試しにpx数を10pxにしてみましょう。

<p>これは<span class="underline">ただの例文</span>です。</p>

.underline {
  background: url("./wave-skyblue.png") bottom repeat-x; 
  background-size: 10px;
}

↑波線が小さくなりました。このように波線を引いて文字を強調することもできます。

5-2.ストライプ風

少し複雑になりますが、ストライプの下線を引くこともできます。この方法では、::afterという疑似要素と呼ばれるものを作り、それに対してストライプ線を引きます。以下の例では"stripe"というclass名を書いていますが、「全てのh1タグに対してストライプ線を引きたい」というようなときはh1{~} h1::after{~}と指定すればOKです。

<p>これは<span class="stripe">ただの例文</span>です。</p>

.stripe{ 
  position: relative;
  padding: 0.3em;
}
.stripe::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: repeating-linear-gradient(-45deg, skyblue, skyblue 2px, white 2px, white 4px);
}

なお、ストライプ線の色は「background: repeatingほにゃらら」内のskyblueを好きな色コードや色名に書き換えることで変更できます。 ちなみにストライプ線の太さ＝heightのpx数です。

5-3. 途中で色の変わる線

下線の色を途中で変えることもできます。ブログの見出しでよく見るやつですね。

線の右側の色を変えたいときは以下のコードのh3{border-bottom: solid 3px #ffc778}の#ffc778を好きな色名や色コードに変えましょう。線の左側の色を変えたいときは、h3::after{border-bottom: solid 3px skyblue;}のskyblueを変えましょう。また、色の変わる位置は、h3::afterのwidthの%を変えることで変更できます。値が大きくなるほど、右側で色が変わるようになります。

<h3>これは<span class="under">ただの例文</span>です。</h3>

h3 {
  border-bottom: solid 3px #ffc778;
  position: relative;
}
h3::after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px skyblue;
  bottom: -3px;
  width: 50%;
}

このようにCSSをうまく使えば、オシャレでユニークな線を引くこともできるのですね。各コード例は別々に使うCSSです。同じクラス名を使う例を同時に貼る場合はクラス名を分け、見出し全体に適用したくない場合は専用クラスで対象を絞ってください。ストライプや二色の疑似要素は複数行の文字に沿って1行ずつ線を引く指定ではないため、長い文章では折り返しを確認してください。