概要

text-emphasis-skipは、CSSでテキストの強調記号（点や丸など）がどの部分でスキップされるかを制御するプロパティです。text-emphasisは、主に東アジアのタイポグラフィにおいて、テキストを強調するために使われるプロパティで、強調記号をテキストの上や横に付け加えます。text-emphasis-skipを使うことで、特定の要素（スペースや句読点など）の上に強調記号がかからないように調整でき、デザインや可読性を高めることができます。

基本的な構文

selector {
    text-emphasis-skip: value;
}
  • valueには、強調記号をスキップする要素を指定します。

値の一覧

  • none
    すべての部分に強調記号を適用します（スキップしません）。
  • spaces
    スペースの上で強調記号をスキップします。
  • punctuation
    句読点やピリオド、コンマなどの記号の上で強調記号をスキップします。
  • symbols
    数字や記号（% や & など）の上で強調記号をスキップします。 これらの値を個別に、または組み合わせて使用することができます。

例 - text-emphasis-skipの基本的な使用

次に、text-emphasis-skipを使って、スペースや句読点の上で強調記号がスキップされる例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .emphasis-none {
            text-emphasis: circle;
            text-emphasis-skip: none; /* スキップなし */
        }
        .emphasis-skip {
            text-emphasis: circle;
            text-emphasis-skip: spaces punctuation; /* スペースと句読点の上でスキップ */
        }
    </style>
    <title>text-emphasis-skipの例</title>
</head>
<body>
    <p class="emphasis-none">これは、スキップしない<strong>強調テキスト</strong>です。</p>
    <p class="emphasis-skip">これは、スペースや句読点でスキップする<strong>強調テキスト</strong>です。</p>
</body>
</html>

説明

  • .emphasis-noneクラスでは、text-emphasis-skip: noneを指定しているため、強調記号がテキストのスペースや句読点の上にも表示されます。
  • .emphasis-skipクラスでは、spacesとpunctuationが指定されており、スペースや句読点の上では強調記号がスキップされ、これらの要素を避けるように描画されます。

text-emphasis-skipの値の詳細

none

noneを指定すると、すべての文字や記号、スペースに強調記号が適用され、スキップされる部分はありません。強調が全面的に適用されるため、視覚的なインパクトを強めることができます。

text-emphasis-skip: none;

spaces

spacesは、テキスト内のスペース上で強調記号をスキップします。これにより、複数の単語やフレーズに強調記号を付ける際に、スペースの部分では記号が表示されないため、視覚的にクリーンなデザインが実現します。

text-emphasis-skip: spaces;

punctuation

punctuationは、句読点やピリオド、コンマなどの記号上で強調記号をスキップします。これにより、文章の区切り部分が強調されず、読みやすさを保ちながら視覚的なバランスを整えることができます。

text-emphasis-skip: punctuation;

symbols

symbolsは、記号や数字などの上で強調記号をスキップします。数字や%記号、＆などの記号が重要なデザイン要素となる場合に、強調記号が重ならないようにします。

text-emphasis-skip: symbols;

複数の値を組み合わせた使用

text-emphasis-skipでは、複数の値を組み合わせて、細かく制御することが可能です。次の例では、スペースと句読点の両方で強調記号をスキップする方法を示しています。

text-emphasis-skip: spaces punctuation;

この設定では、文章内のスペースと句読点の両方の上で強調記号がスキップされるため、テキストの強調が整然と表示されます。

text-emphasis-skipのデザイン効果

text-emphasis-skipを適切に使用することで、強調記号が不要な部分でスキップされ、視覚的によりクリーンなテキストが実現します。特に、スペースや記号が多く含まれるテキストでは、強調記号が視認性や美観を損なうのを防ぐために役立ちます。

例 - text-emphasis-skipで視覚効果を高める

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .clean-emphasis {
            text-emphasis: circle;
            text-emphasis-skip: spaces punctuation;
            font-size: 24px;
        }
    </style>
    <title>text-emphasis-skipを使った視覚効果</title>
</head>
<body>
    <p class="clean-emphasis">強調記号が適切にスキップされた<strong>デザインテキスト</strong>。</p>
</body>
</html>

説明

この例では、text-emphasis-skip: spaces punctuationを使い、強調記号がスペースと句読点の上でスキップされるように設定しています。これにより、強調記号がテキスト全体に不自然にかかるのを防ぎ、読みやすさを維持しつつデザイン性を高めています。

text-emphasis-skipのブラウザ対応

text-emphasis-skipは、 【Chrome】や【Safari】、【Edge】などのブラウザでサポートされていますが、他のブラウザではサポートが限定的な場合があります。プロジェクトで使用する際には、ブラウザの互換性を確認し、必要に応じてフォールバックのスタイルを用意することが推奨されます。

フォールバックの例

ブラウザ間の対応状況を考慮して、text-emphasis-skipがサポートされない環境向けにフォールバックの設定を行います。

p {
    text-emphasis: circle;
    text-emphasis-skip: spaces;
    /* フォールバック設定 */
    text-decoration-skip: spaces;
}

このように、text-decoration-skipを併用することで、古いブラウザでも類似の効果が得られるようにします。

まとめ

text-emphasis-skipは、CSSでテキストの強調記号をどの部分でスキップするかを制御するプロパティです。スペースや句読点、記号上で強調記号をスキップすることで、視覚的にクリーンで整ったデザインを作成でき、可読性を向上させることができます。ブラウザのサポート状況を確認しながら、適切な場面で活用しましょう。

参照:

`CSS` text-emphasis-skipプロパティの詳細 | MDN