Widely available 安全に使用可能。リンクや強調テキストのデザインに活用できる。

text-decoration (color, style, thickness)

text-decoration は CSS の一括指定プロパティで、テキストの装飾的な線の表示を設定します。これは text-decoration-line、text-decoration-color、text-decoration-style およびさらに新しい text-decoration-thickness プロパティの一括指定です。

装飾テキスト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-decoration
1
12
1
1
18
1
その他
css.properties.text-decoration-color

text-decoration-color は CSS のプロパティで、 でテキストに追加された装飾の色を設定します。
57
79
36
12.1
57
12.2
css.properties.text-decoration-line

text-decoration-line は CSS のプロパティで、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。
57
79
36
12.1
57
12.2
CSS プロパティ
line-through
57
79
6
8
57
8
none
57
79
6
8
57
8
overline
57
79
6
8
57
8
underline
57
79
6
8
57
8
その他
css.properties.text-decoration-style

text-decoration-style は CSS のプロパティで、 で指定された線の種類を設定します。線の種類はすべての線に適用され text-decoration-line で定義された線ごとに異なる種類を定義する方法はありません。
57
79
36
12.1
57
12.2
CSS プロパティ
wavy
57
79
6
8
57
8
その他
css.properties.text-decoration-thickness

text-decoration-thickness は CSS のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。
89
89
70
12.1
89
12.2
CSS プロパティ
auto
87
87
70
12.1
87
12.2
from-font
87
87
70
12.1
87
12.2
percentage

パーセント値
87
87
74
17.4
87
17.4
includes color-and-style

短縮表記に含まれる「text-decoration-color」と「text-decoration-style」
57
79
6
26.2
57
26.2
includes thickness

短縮表記に含まれる「text-decoration-thickness」
87
87
70
26.2
87
26.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (39)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (6)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (8)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (8)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (39)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (6)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (8)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (8)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (39)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (6)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (8)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (8)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (89)
実装メモ
  • `text-decoration-thickness` プロパティは、`text-underline-offset`、`text-decoration-color`、または `text-decoration-style` が初期値以外の値に設定されていない限り、効果がありません。 バグ 40734940 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (89)
実装メモ
  • `text-decoration-thickness` プロパティは、`text-underline-offset`、`text-decoration-color`、または `text-decoration-style` が初期値以外の値に設定されていない限り、効果がありません。 バグ 40734940 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (89)
実装メモ
  • `text-decoration-thickness` プロパティは、`text-underline-offset`、`text-decoration-color`、または `text-decoration-style` が初期値以外の値に設定されていない限り、効果がありません。 バグ 40734940 を参照してください。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (8)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (8)

基本構文

CSS 
.fancy-underline {
  text-decoration-line: underline;
  text-decoration-color: #e63946;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

/* Shorthand */
.shorthand {
  text-decoration: underline wavy #e63946 2px;
}

ライブデモ

Wavy underline

text-decoration (color, style, thickness) wavy lineanda-rain demo.

プレビュー全画面表示

doubleline /

text-decoration (color, style, thickness) doubleline / demo.

プレビュー全画面表示

thickdotted line

text-decoration (color, style, thickness) thickdotted line demo.

プレビュー全画面表示

実務での使いどころ

  • カスタムリンクスタイル

    リンクの下線をブランドカラーに合わせ、波線やドット線で視覚的に差別化する。

  • エディタ風のエラー表示

    wavy スタイルの赤い下線でスペルミスやエラー箇所を示す UI を実現する。

注意点

  • text-decoration-thickness を大きくしすぎると文字と重なり可読性が下がる。text-underline-offset と組み合わせて調整すること。

アクセシビリティ

  • 装飾の色だけで意味を伝えないこと。色覚多様性を考慮し、テキストや形状でも情報を補完する。

参考リンク