text-decoration-skip …… テキスト傍線のスキップ方法を指定する
広告
text-decoration-skipプロパティは、テキスト傍線のスキップ方法を指定する際に使用します。
スキップ方法とは、テキストが傍線で装飾されている場合にどの部分の装飾を飛ばすかということです。
傍線のスキップ方法次第で、テキストが読みやすくなることがあるかもしれません。
■値
- none
- テキスト傍線をスキップしない
- objects
- 画像やインラインブロックなどをスキップする
- spaces
- すべてのスペースをスキップする
- ink
- グリフ（文字イメージ）が描画されている箇所をスキップする（文字の線とテキスト傍線が交わる箇所では、テキスト傍線がスキップされて文字の視認性が確保される）
- edges
- テキスト傍線の始端と終端をわずかに内側に食わせる（例えば、要素同士の境目となる箇所などでテキスト傍線がわずかにスキップされる）
<u>石井</u><u>艾俐俐</u> に text-decoration-skip: edges; を適用した例 - box-decoration
- ボックスのmargin、border、padding領域をスキップする
■初期値・適用対象・値の継承
- 初期値
- objects
- 適用対象
- すべての要素
- 値の継承
- する
■使用例
CSSソースは外部ファイル（sample.css）に記述
p.sample1 {text-decoration-skip: none;}
p.sample2 {text-decoration-skip: objects;}
p.sample3 {text-decoration-skip: spaces;}
p.sample4 {text-decoration-skip: ink;}
p.sample5 {text-decoration-skip: edges;}
p.sample6 {text-decoration-skip: box-decoration;}
HTMLソース
aa
↓↓↓
ブラウザ上の表示
Congratulations,it’s
Panda’s birthday!
Congratulations,it’s
Panda’s birthday!
Congratulations,it’s
Panda’s birthday!
Congratulations,it’s
Panda’s birthday!
Congratulations,it’s
Panda’s birthday!
Congratulations,it’s
Panda’s birthday!
広告