【CSS Modules】text-decoration-skipプロパティの使い方
text-decoration-skipプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
text-decoration-skipプロパティは、CSSにおいて、テキストに適用される装飾線（主に下線など）が、テキストコンテンツ内の特定の部分をどのように「スキップ」するかを制御するプロパティです。このプロパティを使用することで、テキストの可読性を高め、より洗練されたデザインを実現できます。
具体的な値として、まずnoneは、装飾線が何もスキップせず、テキスト全体にわたって均一に描画されることを指定します。objectsを指定すると、画像やインラインブロック要素など、インライン要素のコンテンツボックス部分を装飾線が自動的にスキップするようになります。また、spacesは、単語間の空白文字（スペース）を装飾線がスキップするように指示します。
特に重要なinkは、グリフ（文字）の降下部分（例えば「g」や「p」のように、文字が下線より下に突き出る部分）と装飾線が重なるのを防ぐために、装飾線がその部分を避けて描画されるようにします。これにより、文字が下線によって不明瞭になることを防ぎ、読みやすさを向上させます。edgesは、テキスト行の左右の端で、装飾線がわずかに短縮されて描画されることを意味します。最後に、autoは、ブラウザが既定で最適なスキップ方法を決定し、通常はinkに似た動作となります。
これらの値を適切に組み合わせることで、多様なテキスト装飾の表現が可能となり、特に長い文章において下線の視認性を向上させるのに役立ちます。
公式リファレンス: text-decoration-skip
構文(syntax)
1text-decoration-skip: ink;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません