なぜ「選択範囲」のデザインにこだわるのか？：CSS `::selection` を使いこなす
現場でバリバリとコードを書いていると、つい「機能」や「レイアウト」ばかりに目が向きがちだよね。でも、最高峰のプロダクトは、実はユーザーが意識しないような「細部」へのこだわりが積み重なってできている。
その一つが、ユーザーがテキストをマウスでドラッグした時に現れる「あの青いハイライト（選択範囲）」だ。
多くのエンジニアはブラウザのデフォルトに任せきりだけれど、プロダクトの世界観を突き詰めたいなら、この `::selection` 擬似要素を無視する手はない。今日は、この一見地味な機能の裏側と、現場で「おっ、分かってるね」と思われるための実装術を共有しよう。
—
ブラウザはどうやって選択範囲をハイライトしているのか？
ブラウザのレンダリングエンジン（WebKitやBlinkなど）は、ユーザーがテキストを選択すると、その領域の背景色と文字色を一時的にオーバーライドする処理を行う。
本来、CSSは「文書の構造」や「見た目」を制御するものだけど、`::selection` は、ユーザーの操作によって動的に生成される「一時的な状態」に対してスタイルを注入する特殊な入り口なんだ。
ただし、注意が必要なのは、この擬似要素で指定できるプロパティは非常に限定されているということだ。
- 指定可能なプロパティ: `color`, `background-color`, `text-shadow`, `caret-color` など、ごく一部に限られる。
- 注意点: `display` や `position` を変えるような「構造を壊す」プロパティは一切効かない。これは、選択範囲という概念がドキュメントフローから切り離された「ビュー上のレイヤー」だからだ。
実践：ブランドカラーに合わせた上品なハイライト
ただ派手な色に変えればいいというわけじゃない。重要なのは、「選択したテキストが読めること（アクセシビリティ）」と「ブランドの世界観」の両立だ。
現場でそのまま使える、洗練されたセットアップを紹介しよう。
/
- サイト全体の選択範囲を制御する
- 読みやすさを考慮して、背景色はブランドカラーの透明度を下げたものにするのが定石
/
::selection {
/ 背景色: ブランドカラーの薄い色 /
background-color: rgba(74, 144, 226, 0.3);
/ 文字色: 視認性を確保するために濃い色を維持 /
color: #333;
/ ほんのり影をつけて、選択範囲に奥行きを持たせる /
text-shadow: none;
}
/
- 特定の要素だけ別のテーマにしたい場合
- 例：ダークモードのセクションなどはハイライトも反転させる
/
.dark-section ::selection {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
実務でハマりやすい「落とし穴」
中級エンジニアがよくやってしまう失敗が、`::selection` を過信しすぎて「全ての要素に効く」と思い込んでしまうことだ。
1. ベンダープレフィックスの残骸:
昔の名残で `::-moz-selection` を書く人がいるけれど、現在モダンブラウザは標準仕様でほぼ動く。ただし、特定の古い環境を考慮するなら記述しても害はない。
2. アクセシビリティの欠落:
背景色と文字色のコントラスト比を無視して「デザイン重視」の色設定にすると、選択した瞬間にテキストが消えたように見えるという致命的なUIバグが発生する。必ずコントラスト比（最低でも4.5:1以上）を意識すること。
3. 継承のルール:
`::selection` はカスケードのルールに従う。親要素で定義したものが子要素に継承されるが、子要素で個別に上書きも可能だ。複雑なコンポーネント設計をしているなら、グローバルで一つ定義しておき、必要な場所で局所的に上書きする設計（BEM的なアプローチ）が最も管理しやすい。
—
最後に：シニアからのアドバイス
「選択範囲のデザインなんて、誰も見ていないよ」と言う人もいるかもしれない。でも、ユーザーがテキストをコピーしようとした瞬間に、プロダクトのテーマカラーがスッと浮かび上がる。その瞬間の体験は、ブランドの信頼感に直結するんだ。
CSSは、ただの「装飾ツール」じゃない。ユーザーとプロダクトの対話を作るための「言語」だ。こういう細かいところまで神経を行き届かせるエンジニアこそが、現場で本当に信頼される。
まずは自分のポートフォリオや、今担当しているプロダクトのスタイルガイドに、この `::selection` を一言付け加えてみてほしい。それだけで、コードの「品格」が一段階上がるはずだ。
何か実装で詰まったり、より高度なセレクタの組み合わせ方について聞きたいことがあれば、いつでも相談してくれ。現場の最前線で待っているよ。
コメント