text-decoration-style - 文字装飾にスタイルを付ける

投稿日: / 更新日:

スタイルシートのtext-decoration-styleは、text-decorationで付けた文字の線のスタイルを指定するためのプロパティです。2016年2月現在、主要なブラウザではFirefox以外、サポートしていません。

サンプルコード

text-decoration-styleを指定したサンプルコードです。

div {
	text-decoration: underline ;
	text-decoration-style: dashed ;
}

デモ

text-decorationunderlineを指定して付けた下線に、text-decoration-styledashedのスタイルを適用したデモです。CSSを編集して、どのように変化するのかをお試し下さい。

値の指定

指定できる値の説明は下記の通りです。リンクをクリックするとデモを確認できます。

項目説明
inherit親要素の値を引き継ぐ。例の場合、div要素のtext-decoration-styleには、bodyに指定された値(dashed)が引き継がれる。
initialプロパティの初期値が適用される。この場合、solid(一本線)が適用される。
solid初期値。一本線。
double二重線。
dottedドットスタイル。
dashed短い線のスタイル。
wavy波線のスタイル。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。

  • Chrome

    51+

    時期不明

  • Firefox

    6+

    2011年8月

  • Safari

    9.1+

    時期不明

  • Ie

    ×

    11+

    2013年10月

  • Edge

    ×

    14+

    2016年2月

  • Opera

    ×

    36+

    時期不明

  • Safari(iOS)

    9.3+

    時期不明

  • Ie Mobile

    ×

    11+

    2014年7月

  • Chrome

    47+

    2015年12月

  • Android

    ×

    47+

    時期不明

  • FF Mobile

    44+

    2016年1月

  • Opera Mobile

    ×

    33+

    2015年10月