【48-1】ライン装飾をしない対象を決める text-decoration-skip

text-decoration-skipプロパティは、text-decoration で付く装飾ラインの「スキップする（ラインを引かない）」対象を指定します。

text-decoration-skipプロパティは、Text Decoration Module Level 3 勧告候補で一度は仕様に登場しましたが、Level 4 に先送りされました。
Text Decoration Module Level 3 は現時点では勧告候補、Level 4 は初回の草案（First Public Working Draft）です。
というわけでtext-decoration-skipプロパティは、ブラウザでの実装も部分的だったり、勧告までに仕様が変わる可能性大ですが、一応書いておきます。（2019年7月記）

参考：
・Text Decoration Module Level 4 | W3C First Public Working Draft
・text-decoration-skip - CSS | MDN

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

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

text-decoration-skipプロパティの値
キーワード	objectsがデフォルト値。 none、spaces、leading-spaces、trailing-spaces、edges、box-decoration （この他 ink という値も Level 3 の時にあったのですが、これは Level 4 で text-decoration-skip-inkプロパティになるんだそうです）
グローバル値	text-decoration-skip: inherit; 親の値を継承（コレ書かなくても継承するけど） text-decoration-skip: initial; 継承した親の値を解消しデフォルト値に戻す text-decoration-skip: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	する	適用できる要素	すべての要素

それぞれのキーワードは、以下の意味があります。

objects

デフォルト値です。
画像やインラインブロックには、そのマージンボックスも含めて ライン装飾がスキップされます。

none

ライン装飾は何もスキップしません（切れ目なくラインが付く）

spaces

空白（spaces）にライン装飾が付きません。
「半角スペース」「タブ文字」や、letter-spacing・word-spacingプロパティでできた空白も含まれます。

leading-spaces

先頭の空白（spaces）にライン装飾が付きません。（空白については spaces と同じ）

trailing-spaces

末尾の空白（spaces）にライン装飾が付きません。（空白については spaces と同じ）

edges

ライン装飾の開始と終了が、対象のエッジからわずかに内側になります。
これは、2つ並んだ別の下線がくっつかないように表示できます。（中国語だとくっつかないのが大事なんだって）

box-decoration

ボックスのマージン・ボーダー・パディング領域のライン装飾をスキップします。

複数の値を指定できます

値の構文はこうなっています。
none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]

[ ] は「ひとまとまり」の意味。
|| は「少なくとも1つ、複数可、順不同」の意味。
| は「どっちか1つだけ」の意味。
（構文の読み方について詳しくはこちら→ 値の定義構文 - CSS | MDN）

ということで、noneは1個しか書けません。
leading-spaces と trailing-spaces は両方書いてもいいけど、spaces と一緒に使えないということですね。
値を複数書く場合は、いつもの通り「半角スペース」区切りで並べます。

こんなかんじです↓

text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: objects spaces;  /*順不同*/
text-decoration-skip: objects leading-spaces trailing-spaces;  /*順不同*/
text-decoration-skip: objects edges;  /*順不同*/
text-decoration-skip: objects leading-spaces edges box-decoration;  /*順不同*/

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

text-decoration-skipプロパティの値を指定してみます。
<ins>要素で試しています。

今のところ表示するブラウザはあんまり無くて、Chrome と Opera が「objects」の値に反応します。「objects」はインラインブロックなどのマージンボックスごとラインがスキップされます。
（Chrome と Opera は、ほかに「ink」という値にも反応しますが、この値は text-decoration-skip-inkプロパティの値になる予定なので、ここでは省略しています）
（参考：Can I use 2019年7月記）

text-decoration-skip: 未指定（= objects） 　先頭にスペース　 途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース　

text-decoration-skip: none 　先頭にスペース　途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース　

text-decoration-skip: spaces 　先頭にスペース　途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース　

text-decoration-skip: leading-spaces 　先頭にスペース　途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース　

text-decoration-skip: trailing-spaces 　先頭にスペース　途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース　

text-decoration-skip: edges 　先頭にスペース　途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース　

text-decoration-skip: box-decoration 　先頭にスペース　途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース　

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

<div class="mihon">
<p>
<b>text-decoration-skip: 未指定（= objects）</b>
<ins>　先頭にスペース　 途中でスペース<span>インラインブロック</span>
そして、</ins><ins>ここから別のins要素で末尾にスペース　</ins></p>
<p>
<b>text-decoration-skip: none</b>
<ins class="sample1">　先頭にスペース　途中でスペース<span>インラインブロック</span>
そして、</ins><ins class="sample1">ここから別のins要素で末尾にスペース　</ins></p>
<p>
 <b>text-decoration-skip: spaces</b>
 <ins class="sample2">　先頭にスペース　途中でスペース<span>インラインブロック</span>
そして、</ins><ins class="sample2">ここから別のins要素で末尾にスペース　</ins></p>
<p>
 <b>text-decoration-skip: leading-spaces</b>
 <ins class="sample3">　先頭にスペース　途中でスペース<span>インラインブロック</span>
そして、</ins><ins class="sample3">ここから別のins要素で末尾にスペース　</ins></p>
<p>
 <b>text-decoration-skip: trailing-spaces</b>
 <ins class="sample4">　先頭にスペース　途中でスペース<span>インラインブロック</span>
そして、</ins><ins class="sample4">ここから別のins要素で末尾にスペース　</ins></p>
<p>
 <b>text-decoration-skip: edges</b>
 <ins class="sample5">　先頭にスペース　途中でスペース<span>インラインブロック</span>
そして、</ins><ins class="sample5">ここから別のins要素で末尾にスペース　</ins></p>
<p>
 <b>text-decoration-skip: box-decoration</b>
 <ins class="sample6">　先頭にスペース　途中でスペース<span>インラインブロック</span>
そして、</ins><ins class="sample6">ここから別のins要素で末尾にスペース　</ins></p>
</div>


<style>
.mihon {
	margin:1em 0;
	border:solid 1px #ccc;
	padding:1em 1.4em;
	}
.mihon p {font-size:1rem; margin:0 0 1em}
.mihon p:last-child {margin-bottom:0}
.mihon b {display:block; margin:0 .5em; color:#579961}
.mihon span {
	display:inline-block;
    margin:0 .5em}
.sample1 {
	-webkit-text-decoration-skip:none; /*-webkit- は Safari用です*/
	text-decoration-skip:none}
.sample2 {
	-webkit-text-decoration-skip:spaces;
	text-decoration-skip:spaces}
.sample3 {
	-webkit-text-decoration-skip:leading-spaces;
	text-decoration-skip:leading-spaces}
.sample4 {
	-webkit-text-decoration-skip:trailing-spaces;
	text-decoration-skip:trailing-spaces}
.sample5 {
	-webkit-text-decoration-skip:edges;
	text-decoration-skip:edges}
.sample6 {
	-webkit-text-decoration-skip:box-decoration;
	text-decoration-skip:box-decoration}
</style>

次回予告

今回の text-decoration-skipプロパティは 実装しているブラウザが少ないので、どんな指定ができるのかよくわからないですね。（仕様も変わるかもしれないし）

まあとにかく、次回は 今回もちらっと出てきた text-decoration-skip-inkプロパティを見てみましょう。
このプロパティも Text Decoration Module Level 4 で まだ草案段階ですけどね。
これは、文字の「上や下にはみ出た部分」にライン装飾が引かれるときに、ラインが文字にくっつく（そのまま横切る）か、そこをスキップするか、を指定します。