text-decoration-skip - テキスト傍線のスキップ方法を指定する

この記事では「text-decoration-skip - テキスト傍線のスキップ方法を指定する」について、基本の意味と使い方を初心者向けにやさしく説明します。

　text-decoration-skipプロパティは、テキスト傍線のスキップ方法を指定する際に使用します。

　スキップ方法とは、テキストが傍線で装飾されている場合にどの部分の装飾を飛ばすかということです。 傍線のスキップ方法次第で、テキストが読みやすくなることがあるかもしれません。

値

none

テキスト傍線をスキップしない。

objects

画像やインラインブロックなどをスキップする。

spaces

すべてのスペースをスキップする。

ink

グリフ（文字イメージ）が描画されている箇所をスキップする。（文字の線とテキスト傍線が交わる箇所では、テキスト傍線がスキップされて文字の視認性が確保される）

edges

テキスト傍線の始端と終端をわずかに内側に食わせる。（例えば、要素同士の境目となる箇所などでテキスト傍線がわずかにスキップされる）

初期値・適用対象・値の継承

初期値

objects

適用対象

すべての要素

値の継承

する

Sample

<p class="sample1">遊戯苑 -Yugien- ゆうぎえん</p>
<p class="sample2">遊戯苑 -Yugien- ゆうぎえん</p>
<p class="sample3">遊戯苑 -Yugien- ゆうぎえん</p>
<p class="sample4">遊戯苑 -Yugien- ゆうぎえん</p>
<p class="sample5">遊戯苑 -Yugien- ゆうぎえん</p>

.smp p {text-decoration-line: underline;}

.sample1 {text-decoration-skip: none;}
.sample2 {text-decoration-skip: objects;}
.sample3 {text-decoration-skip: spaces;}
.sample4 {text-decoration-skip: ink;}
.sample5 {text-decoration-skip: edges;}

Browser support