1. TOP
  2. html&CSS入門
  3. 【サンプル付き】文章に下線を引く方法を解説!

【サンプル付き】文章に下線を引く方法を解説!

文章に線を引く方法には3つの手法があります。

シンプルな線を引く場合や、見た目にこだわった線を引きたい場合など、用途に合わせて使い分けましょう。

シンプルな下線を引く「text-decoration」

シンプルな下線を引きたい場合は「text-decoration」プロパティを使います。

最もポピュラーな下線を引く方法であり、シンプルな下線を引くことが出来ます。特にこだわりがなけれなこの方法だけ覚えておくだけでも問題ないでしょう。

シンプルな下線を引いてみよう

文字にシンプルな下線を引くには、下記のように書きます。

text-decoration: underline;

text-decorationに「underline」を指定することで下線を引くことができます。

シンプルな下線の実行結果

<p>今思い浮かんだダミーの文章です。<span class='demo_01'>今思い浮かんだダミーの文章です。</span></p>
.demo_01{
    text-decoration: underline;
}

今思い浮かんだダミーの文章です。今思い浮かんだダミーの文章です。

シンプルな下線が引かれているのが確認できると思います。

線の色、線の形状、線の位置など細かい指定はできますが、まずは基本形のこの書き方を覚えておきましょう。

「text-decoration」の使い方の詳細

「text-decoration」で指定できるものは、線の「位置」・「形状」・「色」の3種類です。下記のように半角スペースで区切って指定します。

text-decoration: 線の位置 線の形状 線の色;

好きな順序で指定することができ、特に指定する必要がない場合は省略できます。

/* 順序を変えてもOK*/
text-decoration: 線の形状 線の位置 線の色
/* 不要なものは省略してもOK*/
text-decoration: 線の形状 線の位置

それぞれ指定の方法を解説しています。

線の位置について

どこに線を引くか?をキーワードで指定します。

  • none…線なしのことです。ブラウザの初期値になります。リンクなどデフォルトで下線がついているスタイルをなくしたい場合なども、「none」を指定することでなくすことが出来ます。
  • line-through…取り消し線です。文字の中央に線が表示されます。
  • underline…下線です。文字の下部に線が表示されます。
  • overline…上線です。文字の上部に線画表示されます。

線の形状について

線の形状をキーワードで指定します。キーワードには下記のようなものがあります。

  • solid…一本の直線です。何も指定しない場合の初期値となります。
  • double…二重線です。
  • dotted…点線です。
  • dashed…破線です。
  • wavy…波線です。

線の色について

線の色を指定します。何も指定しない場合、現在の文字の色になります。色の指定方法は、カラーネームや、カラーコードで行います。

色の指定方法の詳細については、文字の色を指定する方法と同じですので、「文字色を変える「color」プロパティの使い方解説」を御覧ください。

実際に指定してみよう

それでは実際にスタイルを指定してみましょう。いくつか例を上げてみます。

例1.) 赤い2重線を文字の中央(取り消し線)に引きたい場合

<span class='demo_02'>わんだふるなアンダスタンドを!</span>
.demo_02{
   text-decoration:line-through red double;
}
わんだふるなアンダスタンドを!

例2.) 黒い点線を文字の上に引きたい場合

<span class='demo_03'>わんだふるなアンダスタンドを!</span>
.demo_03{
   text-decoration:overline black dotted;
}
わんだふるなアンダスタンドを!

例3.) 緑の波線を文字の下に引きたい場合

<span class='demo_04'>わんだふるなアンダスタンドを!</span>
.demo_04{
   text-decoration:underline green wavy;
}
わんだふるなアンダスタンドを!

「text-decoration」の問題点

簡単な下線や、取り消し線などを引く場合は、「text-decoration」が最も簡単です。

ただ、文字と下線がくっついるのが若干気になる点です。現状、下線と文字の距離を自由に変更できるプロパティは用意されていないので調整することが出来ません。

また、線の太さをを自由に変えることも出来ません

「text-decoration」は非常に簡単に下線を引くことが出来ますが、その分カスタマイズは出来ないんですね。

これらの問題点を解消したい場合は、「text-decoration」ではなく、後述する「border-bottom」を使うと解決できます。

おまけ「text-decoration」は3つのプロパティの集合体

「text-decoration」は、線の「位置」・「形状」・「色」の3種類を同時に指定することができると説明しましたが、それぞれ専用のプロパティが用意されているので、別々に指定することもできます。

  • text-decoration-line…線の位置を指定するプロパティです。
  • text-decoration-style…線の形状を指定するプロパティです。
  • text-decoration-color…線の色を指定するプロパティです。

「text-decoration」は上記3つのプロパティのまとめて指定しているんですね。

ちなみに分けて書いても、まとめて書いても結果は同じになります。ですので下記の二つは同じ意味になります。

分けて書く場合

<span class='demo_05'>わんだふるなアンダスタンドを!</span>
.demo_05{
   text-decoration-line: underline;
   text-decoration-style: dotted;
   text-decoration-color: red;
}
わんだふるなアンダスタンドを!

まとめて書く場合

<span class='demo_06'>わんだふるなアンダスタンドを!</span>
.demo_06{
    text-decoration:underline red dotted;
}
わんだふるなアンダスタンドを!

基本的には「text-decoration」を使って方が簡潔に書くことができるのでそちらを使えば問題ありません。

「親要素のスタイルを継承している子要素の、下線の色だけを変えたい」という場合などに、個別のプロパティを使うと良いでしょう。

太さや隙間が調整可能な下線を引く「border-bottom」

「border-bottom」を使うことで、「text-decoration」では出来なかった、線の太さの変更や、文字と下線の距離の調整が出来るようになります。

「border-bottom」の使い方

「border-bottom」は線の「形状」・「太さ」・「色」の3つの値を指定することが出来ます。

それぞれ半角スペース区切りで指定します。また、3つの値のうち初期値のままでいい場合は省略も可能です。

線の形状について

主な線の形状は以下の様なものがあります。

  • none…線なしです。
  • solid…一本の直線です。
  • double…二重線です。
  • dashed…破線です。
  • dotted…点線です。

線の形状の種類は「text-decoration」と似ていますが、波線が用意されていないので注意しましょう。

例として、3pxのオレンジの一本線を引いてみましょう。

3pxのオレンジの一本線

<span class='demo_07'>わんだふるなアンダスタンドを!</span>
.demo_07{
   border-bottom: solid 3px orange;
}
わんだふるなアンダスタンドを!

線の太さを変えることで、印象もかなり変わりますね。また、線と文字の間に適度な隙間が空いているのですっきりとした印象にもなりました。

文字と線を離したい場合

文字と下線の隙間に関しては、padding-bottmで変更することも出来ます。

<span class='demo_08'>わんだふるなアンダスタンドを!</span>
.demo_08{
    border-bottom: solid 3px green;
    padding-bottom: 8px;
}
わんだふるなアンダスタンドを!

蛍光ペンのような線を引く「background」

「background」プロパティは元々は背景色を指定するためのプロパティですが、背景色にグラデーションを指定し一部を透明にすることで蛍光ペンで引いた様なスタイルを作ることが出来ます。

「background」の使い方

使い方は下記のように記述します。

background: linear-gradient(transparent 線の太さ, 線の色 0%);

「線の太さ」は、透明にする割合を指定していて、値が大きほど透明部分が大きくなり線は細くなります。

例えば、

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

とした場合、40%が透明になるので、60%の太さの線が表示されます。

太すぎても細すぎても蛍光ペンっぽくならないので、太さは30%〜70%くらいがオススメです

様々な色の蛍光ペン

<span class='demo_09-1'>わんだふるなアンダスタンドを!</span>
<br>
<span class='demo_09-2'>わんだふるなアンダスタンドを!</span>
<br>
<span class='demo_09-3'>わんだふるなアンダスタンドを!</span>
.demo_09-1{
    background: linear-gradient(transparent 40%, yellow 0%);
}
.demo_09-2{
    background: linear-gradient(transparent 50%, #b0ffb0 0%);
}
.demo_09-3{
    background: linear-gradient(transparent 60%, #ffc7c7 0%);
}
わんだふるなアンダスタンドを!
わんだふるなアンダスタンドを!
わんだふるなアンダスタンドを!

まとめ

  • 線を引く方法には3つの方法がある
  • シンプルな下線を引く「text-decoration」
  • 太さや隙間が調整可能な下線を引く「border-bottom」
  • 蛍光ペンのような線を引く「background」