text-decoration/CSSプロパティ - ホームページ入門サイト

text-decorationプロパティとは

text-decorationプロパティは、テキストに対して線の装飾を指定します。例えば、下線などを表示することができます。

text-decorationの定義は、以下のとおりです。

【text-decorationの定義】
値	text-decoration-line \|\| text-decoration-style \|\| text-decoration-color
初期値	text-decoration-line:none text-decoration-style:solid text-decoration-color:テキストの色
適用対象	すべての要素
継承	しない

値のtext-decoration-line、text-decoration-style、text-decoration-colorは、プロパティです。text-decorationは、これらを一括で指定できます。

半角スペースで区切って指定しますが、1つや2つだけ指定することもできます。

以下は、text-decoration-lineで使える値と表示例です。

【text-decoration-lineで使える値と表示例】
値	説明	表示例
none	テキスト装飾しませんが、すでに装飾されていても消しません。	表示例
underline	下線を引きます。	下線の表示例
overline	テキストの上に線を引きます。	上線の表示例
line-through	テキストの中央に線を引きます。	中央線の表示例

次は、text-decoration-styleで使える値と表示例です。表示例では、underlineも指定しています。

text-decoration-colorで使える値は、CSSで指定できる色です。詳細は、「CSSでの色の指定方法」をご参照ください。

以下は、利用例です。

【text-decorationの利用例】

p {
  text-decoration: underline solid;
}

上記は、以下のように表示されます。

次は、色まで含めた指定です。

【色まで含めた指定例】

p {
  text-decoration: underline wavy red;
}

上記は、以下のように表示されます。

また、以下のように下線と上線を同時に指定することもできます。

【下線と上線を同時に指定】

p {
  text-decoration: underline overline;
}

上記は、以下のように表示されます。

underline overline line-throughと3つの線を指定することもできます。

text-decorationは、親要素で指定されていると子要素でnoneを指定しても装飾を消せません。

以下のHTMLがあったとします。

【divの子要素にp要素】

<div class="test1">
<p class="test2">テストです。<p>
</div>

.test1 {
  text-decoration: underline;
}

.test2 {
  text-decoration: none;
}

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

※スマートフォンのFirefoxとChromeは、Android版です。