小さな見づらさを減らすCSS - ::selection、caret-color、::target-text など、テキスト周りの装飾を改善しよう

テキストの見た目を調整することは、単にページをきれいに見せるためだけのものではありません。

テキストの選択範囲が見えること、入力位置が把握できること、タップの反応が伝わることは、ユーザーに「いま何が起きているか」を伝える状態表示であり、正しく操作できているという確信を与えます。これはデザインの品質に関わるだけでなく、アクセシビリティーの観点からも大切な要素です。

一方で、テキスト選択や入力まわりの表現はブラウザーのデフォルトの設定に任せたままになりがちです。ページの配色やUIの作りによっては、選択範囲が背景に埋もれたり、キャレット（入力位置を示す縦線）が見つけづらかったりすることがあるかもしれません。

この記事では、次のような課題に対して、CSSでどのようにアプローチできるかを紹介します。

選択したテキストの範囲が見づらい
入力中のキャレットが背景に埋もれる
モバイルのタップ時ハイライトがデザインと合わない
検索結果や校正結果など、特定のテキスト範囲を目立たせたいが、HTMLに余計なタグを追加したくない
共有リンクで文章の途中にジャンプしても、どこを見ればよいのかわかりづらい

ここから順に、テキスト選択・入力位置・タップ反応・任意範囲のハイライト・共有リンクのジャンプ先という5つの場面で見ていきます。

1. `::selection`疑似要素 - 選択範囲を見やすくする

記事やドキュメントでは、ユーザーが文章を選択してコピーしたり、読み返したい範囲を一時的になぞったりすることがあります。

::selection疑似要素を使うと、ユーザーが選択したテキストの背景色や文字色を指定できます。ページ全体に同じ選択色を指定するだけでなく、一部の要素だけ選択色を変えることもできます。

以下のデモで、本文・コードブロックの文章を選択してみてください。

※選択色の初期値は、OSやブラウザーの設定によって変わります。デモの上段は、ページ側で選択色を調整していない例として見てください。

.good {
  .article::selection {
    /* 本文では、選択範囲が背景に埋もれない色にする */
    background-color: #ebe9fc;
    color: #3223b3;
  }

  .code-block::selection {
    /* コードブロックでは、暗い背景でも読める色にする */
    background-color: #bab4ff;
    color: #21136f;
  }
}

ポイントは、背景色だけでなく文字色もあわせて考えることです。選択範囲を目立たせても、選択中の文字が読みにくくなると、コピー範囲の確認や読み返しがしづらくなります。

ただし、選択スタイルはユーザーが慣れているブラウザーやOSの表現でもあります。装飾だけを目的に大きく変えるのではなく、「選択範囲を読みやすくする」「背景とのコントラストを確保する」といった目的を持って調整するとよいでしょう。

2. `caret-color`プロパティ - 入力位置を見つけやすくする

フォームや検索ボックスでは、「次に入力される文字がどこに入るのか」がすぐにわかることが大切です。入力欄の背景色や文字色をデザインに合わせて調整している場合、入力中に表示されるキャレットが背景に埋もれて見えづらくなることがあります。

キャレットが見えにくいと、ユーザーは入力欄にフォーカスできているのか、どこから入力が始まるのかを判断しづらくなります。とくにダークテーマや、背景色の濃いフォームでは起こりやすい問題です。

caret-colorプロパティを使うと、入力中に表示されるキャレットの色を指定できます。

.bad {
  textarea {
    /* 悪い例：キャレットが透明だと、入力位置を見つけにくい */
    caret-color: transparent;
  }
}

.bad2 {
  textarea {
    /* 悪い例：背景色とキャレットの色が近いと、入力位置を見つけにくい */
    caret-color: #24146f;
  }
}

.good {
  textarea {
    /* 良い例：入力位置を見つけやすいよう、明るい色を使う */
    caret-color: #ffe66d;
  }
}

caret-colorプロパティは、input要素やtextarea要素、contenteditable属性がある要素など、テキスト入力できる要素に適用できます。

UIで使っている強調色や文字色に近い色を選ぶと、入力位置が見つけやすくなるだけでなく、ボタンやリンクなどの色とも統一感を出せます。一方で、背景色に近い色を指定するとキャレットが見えづらくなるため、入力中に十分な視認性があるかを確認して使ってみてください。

指定できる値は、auto、transparent、任意の色です。autoのままでも多くのブラウザーでは文字色に近い色でキャレットが表示されますが、iOS SafariではOS標準の青色で表示される場合があります。そのため、背景色によっては標準のキャレット色が背景に埋もれて見づらくなることがあります。

フォームの配色を強くカスタマイズしているときは、autoに任せず、背景とのコントラストを確認したうえでcaret-colorプロパティを指定するとよいでしょう。

3. `-webkit-tap-highlight-color`プロパティ - タップ時の反応を調整する

スマートフォンでリンクやボタンをタップすると、一瞬ハイライトが表示されることがあります。このハイライトは、ユーザーに「タップが認識された」ことを伝えるフィードバックです。

一方で、ブラウザー標準のハイライト色がデザインと大きくずれていたり、背景との組み合わせで強く見えすぎたりすることがあります。だからといって完全に消してしまうと、今度はタップできた手がかりが弱くなってしまいます。

-webkit-tap-highlight-colorプロパティを使うと、モバイルブラウザーで表示されるタップ時のハイライト色を調整できます。

スマートフォンでデモを試すか、次の動画でハイライトを消した例と残した例の違いを確認してみてください。

.bad {
  & a,
  & button {
    /* 悪い例：透明にすると、タップできた手がかりが弱くなる */
    -webkit-tap-highlight-color: transparent;
  }
}

.good {
  & a,
  & button {
    /* 良い例：薄い色で、タップできた手がかりを残す */
    -webkit-tap-highlight-color: rgb(50 35 179 / 0.32);
  }
}

デザインに合わないからといって、すぐにtransparentで消してしまうのは危険です。通信環境が不安定なときなど、反応が見えないと「タップできていないのかも」と感じて、同じ操作を何度も繰り返してしまうことがあります。薄いブランドカラーや背景になじむ色へ調整すると、タップできた手がかりを残しながら、画面全体の印象も整えられます。

4. CSS Custom Highlight API - 任意のテキスト範囲を示す

先ほど紹介した::selection疑似要素は、ユーザーが選択した範囲に対するスタイルですが、開発者側で特定のテキスト範囲を示したい場面はどうするとよいでしょうか。

従来、任意のテキスト範囲をハイライトするには、span要素で囲んだり、JavaScriptでDOMを書き換えたりする実装がよく使われていました。しかし、文章の構造に関係のないタグが増えたり、動的な更新時にDOM操作が複雑になったりしがちです。

CSS Custom Highlight APIを使うと、DOMを書き換えずに、JavaScriptで作成したRangeオブジェクトに対してCSSの::highlight()疑似要素でスタイルを指定できます。

::highlight(search-result-good) {
  /* 開発者が付けるハイライトは、選択範囲と区別しやすい色にする */
  background-color: rgb(124 113 246 / 0.18);
}

CSS Custom Highlight APIの基本的な使い方や、検索語のハイライト、入力文の校正などの活用例は、記事『CSSカスタムハイライトAPI - DOM操作なしでテキストをハイライト』で詳しく紹介しています。あわせてご覧ください。

注意したいのは、ユーザーの選択範囲と、開発者が付けたハイライトが重なる場合です。検索ハイライトを濃い黄色で表示している状態でユーザーが同じテキストを選択すると、どちらの状態なのかわかりにくくなることがあります。

検索ハイライトは薄く、ユーザーの選択ははっきり表示するなど、状態ごとに見た目の優先度を分けるとわかりやすくなります。

5. `::target-text`疑似要素 - 共有リンクのジャンプ先を見やすくする

長い記事やドキュメントの中にある特定の一文を共有したいとき、見出しへのリンクだけでは、目的の箇所をすぐに示せないことがあります。リンクを開いたユーザーは、見出しの先にある本文の中から、共有した人が伝えたかった一文を探す必要があります。

テキストフラグメントを使うと、URLの末尾に#:~:text=を含めることで、ページ内の特定のテキストへ直接移動できます。

https://example.com/article#:~:text=共有したい本文

対応ブラウザーでは、リンクを開くと該当するテキストまで自動でスクロールし、対象の範囲が強調表示されます。

この強調表示の見た目は、::target-text疑似要素を使ってCSSで調整できます。

次のデモでは、見出しリンクで章の先頭へ移動する場合と、テキストフラグメントで本文中の一文へ直接移動する場合を比較できます。

上段の見出しリンクでは章全体へ移動するだけですが、下段の共有リンクでは本文中の該当箇所が強調されます。長い記事の中でも、共有された一文を見つけやすくなることを確認してみてください。

::target-text {
  /* 共有リンクで到達した箇所を、本文の配色に合わせて強調する */
  background-color: #ebe9fc;
  color: #1f1b3f;
}

::target-text疑似要素は、id付きの見出しへ移動したときに使う:target疑似クラスとは役割が異なります。:target疑似クラスはURLフラグメントに一致する要素を対象にしますが、::target-text疑似要素はテキストフラグメントで一致したテキストそのものを対象にします。

ただし、テキストフラグメントはリンク先ページの文章に依存します。文章が変更されて一致しなくなると、意図した位置に移動できなくなる場合があります。長期的に使うリンクでは見出しのidへのリンクを優先し、引用や検索結果のように「いまこの一文を示したい」場面で使うとよいでしょう。