CSS text-decoration 文字に線を引くサンプル

CSSのtext-decorationプロパティで、文字に線を引くサンプルです。

目次

仕様 text-decorationプロパティの仕様
サンプル text-decorationのサンプル

text-decorationプロパティの仕様

text-decoration : 値1  値2  値3

text-decorationプロパティは、文字に引く線を指定します。
引数は3つあり、線の位置、線の種類、線の色を指定します。

値1 : text-decoration-line (線の位置)
値1 説明
none 線は引きません。(初期値)
line-through 取り消し線を引きます。
underline 下線を引きます。
overline 上線を引きます。
値2 : text-decoration-style (線の種類)
値2 説明
solid 一重の線 (初期値)
double 二重線
dotted 点線
dashed 破線
wavy 波状の線
値3 : text-decoration-color (線の色)
値3 説明
色を指定します。
値を継承しない

text-decorationのサンプル

text-decorationのサンプルです。

<style>
#p1{text-decoration:none;} /* 線は引きません */
#p2{text-decoration:line-through;} /* 取り消し線 */
#p3{text-decoration:underline;} /* 下線 */
#p4{text-decoration:overline;} /* 上線 */
#p5{text-decoration:underline double red;} /* 二重線 */
#p6{text-decoration:underline dotted red;} /* 点線 */
#p7{text-decoration:underline dashed red;} /* 破線 */
#p8{text-decoration:underline wavy red;} /* 波状の線 */
</style>
<p id="p1">あいうえお none</p>
<p id="p2">あいうえお line-through</p>
<p id="p3">あいうえお underline</p>
<p id="p4">あいうえお overline</p>
<p id="p5">かきくけこ underline double red</p>
<p id="p6">かきくけこ underline dotted red</p>
<p id="p7">かきくけこ underline dashed red</p>
<p id="p8">かきくけこ underline wavy red</p>

以下のイメージになります。

関連の記事

CSS color 文字の色を指定するサンプル
CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにするサンプル
CSS vertical-align 垂直の位置を指定するサンプル
CSS line-height 行の高さを指定するサンプル
CSS letter-spacing 文字の間隔を指定する
CSS word-spaceing 単語の間隔を指定する
CSS overflow-wrap 単語が表示域を超える時の改行
CSS overflow 表示域を超える場合の表示方法

△上に戻る