トップページ  > CSS  > text-decoration-skip

★CSSリファレンス

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!

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
Google Apps Scriptコース
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ