【CSS Modules】text-decoration-skip-inkプロパティの使い方

text-decoration-skip-inkプロパティは、CSSにおいてテキストに適用される装飾線（例えば下線や上線など）が、文字のインク部分をどのように扱うかを制御するプロパティです。

このプロパティを使用することで、テキストの装飾線が文字そのものの形状、特にベースラインより下に突き出す部分（ディセンダ）や、文字によっては上に突き出す部分（アセンダ）を横切る際に、その部分を避けて途切れるように表示させるかどうかを設定できます。これは、装飾線が文字と重なり合うことで、文字の視認性が低下したり、デザインが損なわれたりするのを防ぐために重要な役割を果たします。

具体的には、例えば英単語の「design」に下線を引く場合、「g」のディセンダ部分を下線がそのまま通過すると、文字の形が認識しにくくなることがあります。text-decoration-skip-inkプロパティを適切に設定することで、このディセンダ部分を下線が避けて表示され、文字の可読性と美しさが向上します。

このプロパティには主に以下の値があります。autoはブラウザのデフォルトの動作に従い、通常はインク部分をスキップします。allを指定すると、常に文字のインク部分をスキップし、装飾線が途切れて表示されます。一方、noneを指定すると、インク部分をスキップせずに装飾線が文字の上を通過するように表示されます。このプロパティは、テキストの見た目を細かく調整し、より洗練されたデザインを実現するために役立ちます。

Copy
1selector {
2  text-decoration-skip-ink: auto;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません