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

色々なデザインの下線の引き方

記事内に商品プロモーションが含まれる場合があります

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

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

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

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

  1. HTMLで直接下線を指定する
  2. HTMLでclass名を付与⇒CSSで下線を指定

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…”と書かなければならず、やや面倒です。2つめに、HTMLコード内にstyle=”…”が入ったタグが増えてくると「後から文字の加飾をまとめて変えたい」と思ったときにも1つ1つ書き直さなければならなくなります。

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

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

HTMLコード
<span class="under">例文です</span>
CSSコード
.under {
  text-decoration: underline;
}

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

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

HTMLコード
<p>例文:<span class="under">この部分</span>と<span class="under">この部分</span>に下線をひきたいと思います。</p>
CSSコード
.under {
  text-decoration: underline;
}
ブラウザ表示

例文:この部分この部分に下線をひきたいと思います。


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

見出しに下線を引く

例えばh2見出しに下線を引きたいときは、CSSでh2 {text-decoration: underline}と指定します。これで全てのh2見出しに指定した下線が引かれるようになります。

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

2. 普通の下線

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

2-1. text-decorationを使う

text-decoration: underline;

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

HTMLコード
<p>これは<span class="under">ただの例文</span>です。</p>
CSSコード
.under {
  text-decoration : underline;
}
ブラウザ表示

これはただの例文です。


線の色=文字色

この方法では、下線の色は文字色と同じになります。そのため、以下のように文字色を変えると自動で線の色も変わります。

HTMLコード
<p>これは<span class="under">ただの例文</span>です。</p>
CSSコード
.under {
  color: orange;
  text-decoration : underline;
}
ブラウザ表示

これはただの例文です。


↑この方法では線の太さを変えることはできません。

2-2.border-bottomを使う

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

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

borderプロパティ

borderプロパティの書き方

borderプロパティでは半角スペース区切りで線の「種類」「太さ」「色」を並べます。並べる順番は自由です。

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

HTMLコード
<p>これは<span class="under">ただの例文</span>です。</p>
CSSコード
.under {
  border-bottom: solid 3px #87CEFA;
}
ブラウザ表示

これはただの例文です。


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

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

3-1. 点線にする

border-bottom: dotted 3px orange;

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

HTMLコード
<p>これは<span class="under">ただの例文</span>です。</p>
CSSコード
.under {
  border-bottom: dotted 2px #87CEFA;
}
ブラウザ表示

これはただの例文です。


3-2. 破線にする

border-bottom: dashed 2px orange;

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

HTMLコード
<p>これは<span class="under">ただの例文</span>です。</p>
CSSコード
.under {
  border-bottom: dashed 1px #87CEFA;
}
ブラウザ表示

これはただの例文です。


3-3. 二重線にする

border-bottom: double 6px orange;

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

HTMLコード
<p>これは<span class="under">ただの例文</span>です。</p>
CSSコード
.under {
  border-bottom: double 6px #87CEFA;
}
ブラウザ表示

これはただの例文です。


4. 蛍光ペン風

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

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

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

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

HTMLコード
<p>これは<span class="under">ただの例文</span>です。</p>
CSSコード
.under {
  background: linear-gradient(transparent 50%, #a8eaff 50%);
}
ブラウザ表示

これはただの例文です。


4-2. ペンを細くする

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

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

HTMLコード
<p>これは<span class="under">ただの例文</span>です。</p>
CSSコード
.under {
  background: linear-gradient(transparent 70%, #ff99ab 70%);
}
ブラウザ表示

これはただの例文です。


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

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

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

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

HTMLコード
<p>これは<span class="under">ただの例文</span>です。</p>
CSSコード
.under {
  background: linear-gradient(transparent 0, #8effa1 0);
}
ブラウザ表示

これはただの例文です。


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

5-1. 波線を引く

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

画像を使えば、波線を引くこともできます(画像を使わずに波線を引く方法は現在FireFoxしか対応していません…)。方法は以下のようになります。

手順1:波線画像を手に入れる

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

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

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

Wordpressの場合

たとえばWordPressの場合、記事に画像を挿入するときと同じように画像をアップロードします。URLは「メディアを挿入」画面の右側で取得できます。

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

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

以下のコードの()内にURLを貼れば完成です。

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

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

HTMLコード
<p>これは<span class="under">ただの例文</span>です。</p>
CSSコード
.underline {
  background:url(background:url(/wave-skyblue.png) bottom repeat-x; 
  background-size: 20px;
}
ブラウザ表示

これはただの例文です。


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

HTMLコード
<p>これは<span class="under">ただの例文</span>です。</p>
CSSコード
.underline {
  background:url(background:url(/wave.png) bottom repeat-x; 
  background-size: 10px;
}
ブラウザ表示


これはただの例文です。



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

5-2.ストライプ風

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

HTMLコード
<p>これは<span class="under">ただの例文</span>です。</p>
CSSコード
.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の%を変えることで変更できます。値が大きくなるほど、右側で色が変わるようになります。

HTMLコード
<h3>これは<span class="under">ただの例文</span>です。</h3>
CSSコード
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をうまく使えば、オシャレでユニークな線を引くこともできるのですね。

サルワカくんの顔(通常)
サルワカくん
他にもオシャレな下線の引き方を見つけたら追記していきます。
同じカテゴリーの記事
同じカテゴリーの記事一覧
リファレンス
サルワカ