ほんっとにはじめての HTML5 と CSS3

text-decoration-styleプロパティは、そのまんま「テキストをデコレーションするためのラインのスタイル」を指定します。

ブラウザデフォルトでは、テキストのライン装飾の「スタイル」は 実線（solid） です。これを 波線（wavy） やら 点線（dotted） に変えたりできるってやつです。

テキストデコレーション関連のプロパティは text-decoration ショートハンドプロパティでまとめて指定することができます。今回も含めてテキスト デコレーション関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【47-1】テキストのライン装飾の種類を決める text-decoration-line

【47-2】テキストのライン装飾の色を決める text-decoration-color

【47-3】テキストのライン装飾を波線にもできる text-decoration-style　←今日はココ

【47-4】text-decorationショートハンドプロパティでまとめて指定

参考：
・CSS Text Decoration Module Level 3 | W3C Candidate Recommendation
・text-decoration-style - CSS | MDN

text-decoration-styleプロパティの値

text-decoration-styleプロパティの値は以下のものがあります。

text-decoration-styleプロパティの値
キーワード	solidがデフォルト値。 double、dotted、dashed、wavy
グローバル値	text-decoration-style: inherit; 親の値を継承（コレ書かなくても継承するけど） text-decoration-style: initial; 継承した親の値を解消しデフォルト値に戻す text-decoration-style: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない ただし「継承」ではなく ボックスツリーによる 「伝播（propagated）」はします。 親要素に指定すれば、子要素にも装飾は付きます。	適用できる要素	すべての要素

text-decoration-styleプロパティの指定サンプル

text-decoration-styleプロパティの値「solid、double、dotted、dashed、wavy」を使ってみます。
最初のほうにも書いたけど、IE, Edge, Safari 以外のブラウザで見てみてください。

サンプルのコードはこちら。

<div class="mihon">
<p><a href="#pt2">&lt;a&gt;要素のブラウザデフォルトスタイル</a></p>
<p><a href="#pt2" class="sample1">&lt;a&gt;要素の underline のスタイル変更（double）</a></p>
<p><ins>&lt;ins&gt;要素のブラウザデフォルトスタイル</ins></p>
<p><ins class="sample2">&lt;ins&gt;要素の underline のスタイル変更（wavy）</ins></p>
<p><del>&lt;del&gt;要素のブラウザデフォルトスタイル</del></p>
<p><del class="sample3">&lt;del&gt;要素の line-through のスタイル変更（dashed）</del></p>
<p><s>&lt;s&gt;要素のブラウザデフォルトスタイル</s></p>
<p><s class="sample4">&lt;s&gt;要素の line-through のスタイル変更（dotted）</s></p>
</div>

<style>
.mihon {
	color:black;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em 1.4em;
	}
.mihon p {
	font-size:1rem;
	line-height:2.8;
	margin:0}
a.sample1 {
	-webkit-text-decoration-style:double;
	text-decoration-style:double}
ins.sample2 {
	-webkit-text-decoration-style:wavy;
	text-decoration-style:wavy}
del.sample3 {
	-webkit-text-decoration-style:dashed;
	text-decoration-style:dashed}
s.sample4 {
	-webkit-text-decoration-style:dotted;
	text-decoration-style:dotted}
</style>

ベンダープレフィックス「-webkit-」を付けた text-decoration-style の指定もしています。（24,27,30,33行目）
Safari はdouble（二重線）や wavy（波線）は「-webkit-」を付けることで反応するようです。dashed（破線）dotted（点線）はダメみたい。
Safari では、対応できない値は デフォルトの実線で表示されます。

IE, Edge は CSS2 での text-decorationプロパティ（ショートハンドになる前）にのみ反応します。
ですので、未対応のブラウザには実線とデフォルトカラーでライン装飾を表示できるように指定を工夫する必要があります。
その書き方は次回の text-decorationショートハンドプロパティでまとめます。

次回予告

ということで次回は ショートハンドプロパティになった text-decoration を使って、これまでの「line」「color」「style」の値をまとめて指定しましょう。

関連記事

• 【47-4】text-decorationショートハンドプロパティでまとめて指定
• 【47-3】テキストのライン装飾を波線にもできる text-decoration-style
• 【47-2】テキストのライン装飾の色を決める text-decoration-color
• 【47-1】テキストのライン装飾の種類を決める text-decoration-line
• 【46】テキストの方向性を操作する unicode-bidi と direction
• （ちょっとメモ）縦書きでの字下げ・下線・リストなどを試してみた
• 【45-3】縦書きで「縦中横」ができる text-combine-upright
• 【45-2】縦書きでの文字の向きを決める text-orientation
• 【45-1】日本語の縦書きもできちゃう writing-modeプロパティ
• 【44】タブ文字の幅を決める tab-sizeプロパティ
• 【43】テキストを大文字・小文字に変換する text-transform
• 【42】句読点などをボックス外にぶら下がらせる hanging-punctuation
• 【41】句読点などが行頭に来るかどうか決める line-break
• 【40】文字間の間隔を指定する letter-spacingプロパティ
• 【39】単語間の間隔を指定する word-spacingプロパティ