CSS text-decoration-lineプロパティ：text-decorationの線装飾種類を設定

定義と使い方

text-decoration-lineプロパティは、
テキストに使用される線の装飾の種類を設定します。

基本の例

形式の構文

値

text-decoration-lineプロパティは、テキストにどの線の装飾が適用されるかを決定します。以下の値は、それぞれの装飾がどのように表示されるかを示します。

text-decoration-line 속성 값
`none`	テキストに一切の装飾は適用されません。
`underline`	テキストに下線を追加します。
`overline`	テキストの上に線を引きます。
`line-through`	テキストの中央を横切る取り消し線を追加します。
`blink`	点滅（blink）効果を付与します。（ブラウザーの対応状況が限定的な場合があります。ブラウザ互換性を確認する）
`spelling-error`	ブラウザーは各テキスト行のスペルミスを強調するために、点線または波線の赤い線を引きます。（ブラウザーの対応状況が限定的な場合があります。ブラウザ互換性を確認する）
`grammar-error`	ブラウザーは各テキスト行の文法エラーを強調するために、点線または波線の灰色または緑色の線を引きます。（ブラウザーの対応状況が限定的な場合があります。ブラウザ互換性を確認する）

構文

CSS

/* 単一キーワード値 */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;

/* 複数キーワード値 */
text-decoration-line: underline overline;
text-decoration-line: overline underline line-through;

/* グローバル値 */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

形式定義

text-decoration-lineプロパティの形式定義
初期値	`none`
適用要素	すべての要素
継承	いいえ
アニメーション	いいえ

活用例

以下はtext-decoration-lineプロパティをテキストに適用する実用的な例です。この例では単一キーワード値と複数キーワード値の両方の使い方を紹介しており、ウェブアクセシビリティに関する考慮点も含まれています。

単一キーワード値の使用方法

複数キーワード値の使用方法

text-decoration-lineプロパティの値は、空白（スペース）で区切られた複数の値を指定できます。

推奨されない使用方法

<del>タグのように取り消しや削除の意味を表すものでない限り、CSSのline-throughを「取り消し」の意味で使用しないでください。

以下の例のように、単にスタイルとして「取り消し」を示すためにline-throughを使用してはいけません。これは視覚障害者がスクリーンリーダーなどの支援技術を通じてウェブページを理解する際に混乱を招く可能性があります。HTMLには意味論的に取り消しや削除を示す<del>タグが別に存在します。

以下は「取り消しの意味」として<del>タグを使用した例です

HTML

<p>
    <del>
        delタグでない場合は、CSSの取り消し線（line-through）を意味として使用しないでください。
    </del>
</p>

<del>タグはほとんどのブラウザーでテキストに取り消し線を表示します。

ブラウザ互換性

text-decoration-lineプロパティのブラウザ互換性
プロパティ	デスクトップ Chrome	デスクトップデスクトップ Edge	デスクトップ Firefox	Safari
`text-decoration-line`	57	79	36	12.1

caniuse.comで詳しい情報をご確認ください。

仕様書

text-decoration-lineプロパティに関する仕様書
仕様書
`text-decoration-line`	CSS Text Decoration Module Level 4 #text-decoration-line-property

参考資料

codingCourses：CSS text-decoration-line Property – Specifies Line Decorations