text-decoration-skip-inkプロパティは何を制御しますか？

text-decoration-skip-inkプロパティは、アンダーラインやストライクスルーが文字の下で途切れるか、文字を跨いで描かれるかを制御します。

text-decoration-skip-inkの主な値にはどのようなものがありますか？

text-decoration-skip-inkの主な値には、auto、none、allがあり、装飾のスキップ方法を設定します。

text-decoration-skip-inkはどのような場面で使いますか？

text-decoration-skip-inkは、テキスト内のアンダーラインが、視認性や読みやすさを考慮して途切れるようにしたい場合や、デザイン上の一貫性を保つために使用されます。

【CSS】text-decoration-skip-inkの使い方 - テキスト装飾のスキップ機能を制御する

text-decoration-skip-inkとは？

CSSのtext-decoration-skip-inkプロパティは、テキストに適用されるアンダーラインやストライクスルー（取り消し線）などの装飾が、文字の形状に応じてどのように描かれるかを制御するためのプロパティです。通常、アンダーラインは文字の下を一直線に引かれますが、text-decoration-skip-inkを使うと、文字の形に合わせてアンダーラインが途切れたり、曲がったりするかを調整できます。特に「g」や「j」など、ベースラインから垂れ下がる文字や、「f」や「k」のようにベースラインを突き抜ける文字がある場合、このプロパティを使うことで、アンダーラインが文字に重ならないようにすることができます。これにより、読みやすさと視認性を向上させ、より洗練されたタイポグラフィを実現します。

text-decoration-skip-inkの構文

.element {
  text-decoration-skip-ink: auto | none | all;
}

値の説明

auto: デフォルトの設定です。アンダーラインは文字の形に応じて適切にスキップ（途切れる）されます。読みやすさを考慮したスキップが自動的に行われます。
none: アンダーラインやストライクスルーがスキップされず、文字の下を一直線に引かれます。どんな文字でも装飾が途切れることなく表示されます。
all: すべてのテキスト装飾が文字を避け、スキップされます。通常の自動処理よりも、さらに積極的にスキップが適用されます。

text-decoration-skip-inkを使った基本例

次に、text-decoration-skip-inkを使用して、アンダーラインがどのように文字と重ならないように調整されるかを示す例を紹介します。

例: デフォルト（auto）でのアンダーライン処理

<p class="text-auto">`CSS`は素晴らしい技術です。</p>

.text-auto {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

解説

text-decoration: underline: テキストにアンダーラインを適用しています。
text-decoration-skip-ink: auto: 文字の形に応じて、アンダーラインが自動で途切れるようになります。これにより、「g」や「y」などの文字にアンダーラインが重ならないようになり、見た目が美しくなります。この例では、文字の下に引かれるアンダーラインが、文字の形状に合わせて自動的に調整され、読みやすくなっています。

text-decoration-skip-inkの応用例

次に、text-decoration-skip-inkを「none」や「all」に設定した場合の例を見てみましょう。これらの値を使うことで、テキスト装飾が文字に重なるか、途切れるかを細かくコントロールできます。

例: スキップなしでのアンダーライン

<p class="text-none">`CSS`は素晴らしい技術です。</p>

.text-none {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

解説

text-decoration-skip-ink: none: この設定では、アンダーラインがどのような文字の下でも途切れることなく、一直線に引かれます。デザイン上、装飾を強調したい場合や、文字とアンダーラインが重なっても良い場合に使用します。この例では、アンダーラインが文字の形に関係なく一直線に引かれ、文字と線が重なる部分があります。デザインに統一感を持たせたい場合や、文字の装飾を強調したいときに有効です。

例: 全ての文字に対して積極的にスキップする

<p class="text-all">`CSS`は素晴らしい技術です。</p>

.text-all {
  text-decoration: underline;
  text-decoration-skip-ink: all;
}

解説

text-decoration-skip-ink: all: すべての文字について、アンダーラインが積極的にスキップされます。通常のautoよりもさらに細かく装飾が途切れます。この設定では、より積極的に文字とアンダーラインがぶつからないように調整され、どんな文字でもアンダーラインが重ならずに表示されます。

text-decoration-skip-inkの実際の使用ケース

text-decoration-skip-inkは、デザインやユーザー体験を向上させるために多くの場面で使用されます。以下は、その代表的な使用ケースです。

リンクや強調テキストのデザイン

リンクテキストや強調されたテキストにアンダーラインを使用する場合、読みやすさとデザイン性を両立させたいときに役立ちます。特に、ベースラインから突き出した文字が多いテキストでは、autoまたはallを使用することで、視認性が向上します。

アクセシビリティを考慮したタイポグラフィ

テキストの装飾は、視覚的なアクセシビリティに大きく影響します。アンダーラインが文字に重なると、特定の視覚障害を持つユーザーにとって読みづらくなる可能性があります。text-decoration-skip-inkを使用することで、読みやすさを確保しつつ、デザイン性を損なわずに装飾を提供できます。

モダンで洗練されたデザイン

デザインの一貫性や細部の美しさにこだわる場合、アンダーラインやストライクスルーの見え方を細かく調整することが重要です。特に、テキストが中心となるウェブサイトや、タイポグラフィに重点を置いたデザインでは、アンダーラインの処理がそのままデザインの質を左右します。

ブラウザ対応

text-decoration-skip-inkは、モダンブラウザで広くサポートされていますが、特定の古いブラウザではサポートされていない場合があります。主な対応状況は以下の通りです。

Google Chrome: サポート
Firefox: サポート
Safari: サポート
Edge: サポート
Internet Explorer: 未対応ブラウザの互換性を確認しながら使用することをお勧めします。

まとめ

CSSのtext-decoration-skip-inkプロパティを使うことで、アンダーラインやストライクスルーの描画方法を柔軟に制御し、テキストの視認性やデザイン性を高めることができます。autoで文字の形に応じた自動調整を行ったり、noneで装飾を強調したり、allでより積極的なスキップを適用するなど、使用シーンに応じて適切な設定を選択できます。特にリンクテキストや強調したいテキストに対して、適切なスキップ機能を使用することで、読みやすさを向上させながら、モダンで洗練されたデザインを実現できます。デザインに一貫性とアクセシビリティを加えるために、このプロパティをぜひ活用してみてください

参照:

text-decoration-skip-ink - `CSS` Cascading Style Sheets | MDN