CSStext-decoration-style プロパティは、 text-decoration-line で指定された線の種類を設定します。線の種類はすべての線に適用され text-decoration-line で定義された線ごとに異なる種類を定義する方法はありません。

文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 <del><s> といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。

線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の text-decoration プロパティを使用したほうが便利かもしれません。

構文

/* キーワード値 */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

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

solid
単独線を描画します。
double
二重線を描画します。
dotted
点線を描画します。
dashed
破線を描画します。
wavy
波線を描画します。
-moz-none
線を描画しません。代わりに text-decoration-line: none を使用してください。

形式文法

solid | double | dotted | dashed | wavy

.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
<p class="wavy">This text has a wavy red line beneath it.</p>

仕様書

仕様書 状態 備考
CSS Text Decoration Module Level 3
text-decoration-style の定義
勧告候補 初回定義。 text-decoration プロパティが複数の関連するプロパティを定義するための一括指定になりました。

初期値solid
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 57Edge 未対応 なしFirefox 完全対応 36
完全対応 36
未対応 6 — 39
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 44Safari 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile 未対応 なしFirefox Android 完全対応 36
完全対応 36
未対応 6 — 39
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 44Safari iOS 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 7.0
wavyChrome 完全対応 57Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 44Safari 完全対応 ありWebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile 未対応 なしFirefox Android 完全対応 6Opera Android 完全対応 44Safari iOS 完全対応 ありSamsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

  • 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の text-decoration プロパティを使った方が便利かもしれません。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, mitsuba-clover, ethertank, sosleepy, yyss
最終更新者: mfuji09,