text-decoration-style

概要

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

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

初期値solid
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承不可
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

solid double dotted dashed wavy
以下のキーワードのいずれかです:
キーワード 説明 備考
solid 一重の線を描画  
double 二重線を描画  
dotted 点線を描画  
dashed 破線を描画  
wavy 波状の線を描画  
-moz-none 線を描画しない 使用しないでください : 代わりに text-decoration-line: none を使用してください
inherit
親要素で計算された値を再利用することを示すキーワードです。

形式文法

solid | double | dotted | dashed | wavy

.example { 
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
}
<p class="example">This is how it looks.</p>

仕様書

仕様書 状況 備考
CSS Text Decoration Level 3
The definition of 'text-decoration-style' in that specification.
勧告候補 初期定義。text-decoration プロパティは以前はショートハンドではありませんでした。

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 6.0 (6.0) - 39.0 (39.0)-moz
36.0 (36.0)
未サポート 未サポート 未サポート 未サポート
wavy 6.0 (6.0) 未サポート 未サポート 未サポート 未サポート
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 未サポート 6.0 (6.0)- 39.0 (39.0)-moz
36.0 (36.0)
未サポート 未サポート 未サポート
wavy 未サポート 未サポート 6.0 (6.0) 未サポート 未サポート 未サポート

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

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