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

text-decoration ショートハンドプロパティは、
text-decoration-line
text-decoration-color
text-decoration-style
の値をまとめて指定することができます。

上記3つのプロパティの記事はこちらです。

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

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

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

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

text-decorationプロパティは CSS 2まではショートハンドではありませんでした。
値は text-decoration-line の値（none、underline、overline、line-through、blink）のみ。

それが CSS 3（Text Decoration Module Level 3 ）から、新しくtext-decoration-line、text-decoration-color、text-decoration-styleプロパティができて、text-decorationプロパティはショートハンドプロパティになりました。

text-decorationショートハンドプロパティは、Chrome, Firefox, Opera は対応。
Safari（iOS Safari も含む）は、ベンダープレフィックス「-webkit-」付きで対応。ただし text-decoration-styleの一部の値には未対応です。

IE, Edge は、CSS 2 での text-decorationプロパティ（ショートハンドになる前）に対応しています。（参考：Can I use　2019年4月記）

本日のINDEX

1. text-decorationショートハンドのルール
   1. text-decoration は伝播し、指定は追加される
   2. CSS 2 の書き方も併用する
2. text-decorationショートハンドの指定サンプル

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

text-decorationショートハンドのルール

どのショートハンドでも同じですが、ショートハンドで省略された値は「デフォルト値」になります。

その他の注意点は以下の2点です。

text-decoration は伝播し、指定は追加される

親要素に指定された text-decorationは、子要素のインライン要素では外すことができません。
例えば、下のようなソースコードで、

<p>アンダーライン <span>デコレーション無し</span></p>

<style>
p {text-decoration: underline;}
span {text-decoration: none;}
</style>

プレビューはこのように、<span>要素のアンダーラインは無くなりません。

アンダーライン デコレーション無し

<span>要素に新しいラインを指定すれば、

p {text-decoration: underline;}
span {text-decoration: overline;}

プレビューはこのように、<span>要素のラインが追加されます。

アンダーライン オーバーライン

CSS 2 の書き方も併用する

CSS2 での text-decorationプロパティ（ショートハンドになる前）に対応しているブラウザは、text-decoration-line の値（none、underline、overline、line-through、blink）のみが text-decorationプロパティで指定できます。

CSS 3 での書き方（複数の値を「半角スペース」で区切って指定）をすると、CSS 2 対応のブラウザでは無視されます。

ですので、下記のように text-decorationショートハンドプロパティの記述の前に、CSS 2 での text-decorationプロパティの記述もしておくのがベストな指定だそうです。

a {
    color: #0ff;
    text-decoration: underline; /*css2での指定*/
    text-decoration: red dotted underline; /*css3での新しい指定（CSS2対応ブラウザは無視）*/
}

text-decorationショートハンドの指定サンプル

ショートハンドでの指定サンプルです。

<a>要素の underline の指定

<ins>要素の underline の指定

<del>要素の line-through の指定

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

<div class="mihon">
<p><a href="#pt2" class="sample1">&lt;a&gt;要素の underline の指定</a></p>
<p><ins class="sample2">&lt;ins&gt;要素の underline の指定</ins></p>
<p><del class="sample3">&lt;del&gt;要素の line-through の指定</del></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 {
	text-decoration:underline;
	-webkit-text-decoration:underline skyblue solid;
	text-decoration:underline skyblue solid}
ins.sample2 {
	text-decoration:underline;
	-webkit-text-decoration:underline overline #b8e600 wavy;
	text-decoration:underline overline #b8e600 wavy}
del.sample3 {
	text-decoration:line-through;
	-webkit-text-decoration:line-through hsla(0,100%,45%,0.5) double;
	text-decoration:line-through hsla(0,100%,45%,0.5) double}
</style>

次回予告

テキストデコレーションに関するプロパティは、まだいくつか残っているのですが、ここで一旦区切ります。

で、次回から2回ほど HTMLの要素について書きます。
HTML5.1 から実装された <picture>要素を放置しているので、これを書きたいのですが、その前に <img>要素について まとめておきたいと思います。

次回は <img>要素について。
HTML5.1で追加された「srcset属性」を使って複数の画像ファイルを指定し、条件に合わせてブラウザに画像を選ばせることができるようになったので、とても便利です。

その後で、また CSS に戻ります。
その時はテキストデコレーション繋がりで text-decoration-skipプロパティをやる予定です。