【CSSコピペ集】文字に色々な下線を引く方法（一本・二本・点線・破線・蛍光マーカー）

こんにちは。うめです。

HTMLで書いたテキストの下に下線を引きたいな。と思ったことはありませんか？ここでは、いろいろなデザインの下線とその書き方をご紹介します。コピペですぐに貼れるようにしたので、ぜひ使ってみてください。

また、各プロパティと値の一覧もページ下に載せましたので、そちらが見たい方はこちらからページ内移動してください。→各プロパティと値の一覧まで移動

文字にデザインを指定する方法2つ

文字に下線を引く方法は大きく2つ。

1. HTMLに書いたテキスト要素に直接書く
2. クラス（class）を使ってcssで装飾する方法

①HTMLに書いたテキスト要素に直接書く

まずは見本をご紹介しますね。

<p>本日の天気は晴天。<span style="text-decoration:underline">さわやかな秋風</span>が気持ち良い</p>

上記がどのように見えるかと言いますと、こちらです。↓↓

これは何をしているかと言いますと、
「さわやかな秋風」というテキストの前後を「span」タグで囲み、
そのタグに直接、下線のスタイルである「text-decoration:underline」を指定しています。

後述もしますが、ここに「text-decoration:underline」の「underline」部分を「overline」にすると上線が、引けますし、「line-through」にすると取り消し線が引けます。

こんな感じです♪

ですが、この方法を使うと、どんどんソースコードが長くなってしまいますし、線を引きたいところを毎回「span」で囲って、スタイル指定して…となって、面倒ですよねー。なので、この後ご説明します、「classを使ってcssで装飾する方法」がおすすめです。

②クラス（class）を使ってcssで装飾する方法

では、次はclassを使ってcssのスタイルで装飾する方法です。この方法は一度書いたCSSをあちこちで使い回しできるのでとっても便利なんです！おすすめ。

まずは見本をご紹介します。

HTMLにこんな風に書いて↓

<p>本日の天気は晴天。<span class="line">さわやかな秋風</span>が気持ち良い</p>

CSSにこんな風に書くと↓

.line{
text-decoration:underline;
}

こんな風に表示されます↓

そして、この「line」というクラスは同じHTML内でも、違うページのHTMLでも、指定すると同じ下線を引いてくれます。すごく便利。

もし、そもそもCSSのデザイン反映方法がいろいろあってよくわからない!という方がいらっしゃいましたら、こちらで詳しく解説していますので、ご参考までに♪→【CSS疑問解決】CSSってどこに書くの?HTMLにCSSを反映させる3つの方法

文字に下線を引くプロパティ3種類をご紹介

下線を引くために使うプロパティは3つあります。

1. text-decoration
2. border-bottom
3. background

この3種類。それぞれに値を入れることで色々な下線を表現ですます。

プロパティとは？と疑問に思われた方もいるはず…。CSSは「何を」と「どうするのか」という組み合わせで出来ているんです。

例えば先ほどのこちら↓

.line{
text-decoration:underline;
}

「text-decoration」の部分が「何を」にあたり、「underline」の部分が「どうするのか」になります。

上の例ですと、「テキストのデコレーション（text-decoration）」を「下線（ underline ）」にします！と指示しています。

この「何を」部分が3種類あるので、それをご紹介したという訳なんです。

ここまでは前置きでしたが、ここからコピペOKの下線の書き方をご紹介していきます。

一本線を引く

text-decorationで引く

完成見本

HTMLに直書き方法

<p>本日の天気は晴天。<span style="text-decoration:underline solid #000;">さわやかな秋風</span>が気持ち良い</p>

class指定方法

HTMLの書き方

<p>本日の天気は晴天。<span class="line">さわやかな秋風</span>が気持ち良い</p>

CSSの書き方

.line{
text-decoration:underline solid #000;
}

「text-decoration」とは文字装飾のプロパティです。「underline」はその名の通り、下線で、「solid」は線の種類。「#000」は線の色を指定できます。

border-bottomで引く

完成見本

HTMLに直書き方法

<p>本日の天気は晴天。<span style="border-bottom:1px solid #000;">さわやかな秋風</span>が気持ち良い</p>

class指定方法

HTMLの書き方

<p>本日の天気は晴天。<span class="line">さわやかな秋風</span>が気持ち良い</p>

CSSの書き方

.line{
border-bottom:1px solid #000;
}

boderとは要素に枠線を付けるプロパティです。このbordeにbottomを付けて、「border-bottom」にすると要素に下線を書くことができるようになります。

値となっている「1px solid #000」では、1px部分は線の太さ、solidは線の種類、#000は線の色を指定しています。

二重線

text-decorationで引く

完成見本

HTMLに直書き方法

<p>本日の天気は晴天。<span style="text-decoration:underline double #000;">さわやかな秋風</span>が気持ち良い</p>

class指定方法

HTMLの書き方

<p>本日の天気は晴天。<span class="line">さわやかな秋風</span>が気持ち良い</p>

CSSの書き方

.line{
text-decoration:underline double #000;
}

text-decorationプロパティのsolidを「double」に書き換えた形です。

border-bottomで引く

完成見本

HTMLに直書き方法

<p>本日の天気は晴天。<span style="border-bottom:4px double #000;">さわやかな秋風</span>が気持ち良い</p>

class指定方法

HTMLの書き方

<p>本日の天気は晴天。<span class="line">さわやかな秋風</span>が気持ち良い</p>

CSSの書き方

.line{
border-bottom:4px double #000;
}

ここでのポイントは、線を太めにすることです。この太さは2本合わせた太さになっているので、1pxにしてしまうと1本線になってしまうので要注意！

点線

text-decorationで引く

完成見本

HTMLに直書き方法

<p>本日の天気は晴天。<span style="text-decoration:underline dotted #000;">さわやかな秋風</span>が気持ち良い</p>

class指定方法

HTMLの書き方

<p>本日の天気は晴天。<span class="line">さわやかな秋風</span>が気持ち良い</p>

CSSの書き方

.line{
text-decoration:underline dotted #000;
}

text-decorationプロパティのsolidを「dotted」に書き換えた形です。

border-bottomで引く

完成見本

HTMLに直書き方法

<p>本日の天気は晴天。<span style="border-bottom:2px dotted #000;">さわやかな秋風</span>が気持ち良い</p>

class指定方法

HTMLの書き方

<p>本日の天気は晴天。<span class="line">さわやかな秋風</span>が気持ち良い</p>

CSSの書き方

.line{
border-bottom:2px dotted #000;
}

破線

text-decorationで引く

完成見本

HTMLに直書き方法

<p>本日の天気は晴天。<span style="text-decoration:underline dashed #000;">さわやかな秋風</span>が気持ち良い</p>

class指定方法

HTMLの書き方

<p>本日の天気は晴天。<span class="line">さわやかな秋風</span>が気持ち良い</p>

CSSの書き方

.line{
text-decoration:underline dashed #000;
}

text-decorationプロパティのsolidを「dotted」に書き換えた形です。

border-bottomで引く

完成見本

HTMLに直書き方法

<p>本日の天気は晴天。<span style="border-bottom:2px dashed #000;">さわやかな秋風</span>が気持ち良い</p>

class指定方法

HTMLの書き方

<p>本日の天気は晴天。<span class="line">さわやかな秋風</span>が気持ち良い</p>

CSSの書き方

.line{
border-bottom:2px dashed #000;
}

蛍光マーカー

最後は蛍光マーカー風の線を文字下に書く方法です。こちらは「background」という、要素の背景を指定するプロパティで設定できます。

border-bottomで引く

完成見本

HTMLに直書き方法

<p>本日の天気は晴天。<span style="background: linear-gradient(transparent 50%, #fcee21 0%);">さわやかな秋風</span>が気持ち良い</p>

class指定方法

HTMLの書き方

<p>本日の天気は晴天。<span class="line">さわやかな秋風</span>が気持ち良い</p>

CSSの書き方

.line{
background: linear-gradient(transparent 50%, #fcee21 0%);
}

linear-gradient(transparent 色を付けたくない大きさ,マーカーの色 0% );

という形で設定すると、背景に2色グラデーションが設定できます。

色を付けたくない大きさは、テキストの上から何％のあたりまで色を付けたくないよ～という意味になります。

70％にすると、文字の下30％に色が付きますし、0％にすると文字全体に色が付きます。

各プロパティと値の一覧

いかがでしたでしょうか。最後に各プロパティと値の一覧も載せましたので、参考にして頂けると嬉しいです。

text-decorationで使用 -線の位置-

text-decoration・border-bottom両方で使用 -線の種類-