CSS text-decorationプロパティ：テキスト装飾のショートハンドプロパティ

定義と使い方

text-decorationプロパティは、
text-decoration-line、text-decoration-line、text-decoration-color、text-decoration-style、text-decoration-thicknessといったテキスト装飾スタイルに関するプロパティをまとめて指定できるショートハンドプロパティ（shorthand property）です。

このショートハンドプロパティを使用すると、複数のテキスト装飾プロパティを一度に設定できるため、コードの簡潔さと保守性の両面で便利です。

ショートハンドプロパティで省略された値は、すべて各個別プロパティの初期値（initial value）として設定されます。

基本の例

形式の構文

CSS

selector {
    text-decoration: <'text-decoration-line'> || <'text-decoration-color'> || <'text-decoration-style'> || <'text-decoration-thickness'>;
    /*  
        この値は、
        text-decoration-line、
        text-decoration-color、
        text-decoration-style、
        text-decoration-thicknessプロパティの値を指定します。
        プロパティ値の指定順序に決まりはありません。
        省略されたプロパティには初期値が適用されます。
    */
}

値

text-decorationプロパティには、1つ以上の空白で区切られた値を指定します。これらの値は、text-decoration-line、text-decoration-thickness、text-decoration-style、およびtext-decoration-colorプロパティの値です。指定する値の順序に決まりはありません。

このショートハンドプロパティでは、各個別プロパティの値を省略することができ、省略された値にはすべてそのプロパティの初期値（initial value）が適用されます。

text-decorationプロパティ値
`text-decoration-line`	テキストに適用する線の装飾の種類を設定します。
`text-decoration-style`	テキストに使用される`text-decoration-line`で指定された線の装飾のスタイルを設定します。
`text-decoration-color`	テキストに使用される`text-decoration-line`で指定された線の装飾の色を設定します。
`text-decoration-thickness`	テキストに使用される`text-decoration-line`で指定された線の装飾の太さを設定します。

構文

CSS

/* キーワード値 */
text-decoration: underline;
text-decoration: overline blue;
text-decoration: none;

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

形式定義

text-decorationプロパティの形式定義
初期値	各ショートハンドプロパティの初期値は以下の通りです。 `text-decoration-line`：`none` `text-decoration-color`：`currentcolor`（現在の文字色） `text-decoration-style`：`solid` `text-decoration-thickness`：`auto`
適用要素	すべての要素
継承	いいえ

活用例

CSS

p {
    text-decoration: underline red;
}
/*
    省略されたtext-decoration-styleは初期値のsolidが指定されます
    省略されたtext-decoration-thicknessは初期値のautoが指定されます
*/

注意点

text-decorationプロパティを使用する際には、いくつか注意すべき点があります。

ブラウザ互換性の注意

CSS - Safariブラウザではサポートされていません Safariブラウザでは、text-decoration-thicknessの値を含むtext-decorationの値はサポートされていません。
ブラウザ互換性を参照してください！

p {
    text-decoration: underline red 5px;
}
/*
    省略されたtext-decoration-styleは初期値のsolidが指定されます
*/

CSS - Safariブラウザ対応のための方法

p {
    text-decoration: underline red;
    text-decoration-thickness: 5px;
}
/*
    省略されたtext-decoration-styleは初期値のsolidが指定されます
*/

初期値注意

CSS

p {
    text-decoration: red;
}
/*
    省略されたtext-decoration-lineは初期値のnoneが指定されます（重要）
    省略されたtext-decoration-styleは初期値のsolidが指定されます
    省略されたtext-decoration-thicknessは初期値のautoが指定されます
*/

上記の例の場合、省略されたtext-decoration-lineは初期値のnoneが指定されます。noneの値はテキストに何の装飾も適用しないことを意味します。

ブラウザ互換性

最終更新日: 2025-07-18

text-decorationプロパティのブラウザ互換性
プロパティ	デスクトップ Chrome	デスクトップデスクトップ Edge	デスクトップ Firefox	Safari
`text-decoration`	1	12	1	1
`text-decoration-color`、`text-decoration-style`が含まれるショートハンドプロパティ	57	79	6	8
`text-decoration-thickness`の値が含まれるショートハンドプロパティ	87	87	70	いいえ

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

仕様書

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

参考資料

codingCourses：CSS text-decoration Property – Shorthand for Text Decoration Styling