「選択範囲」までデザインしてる？ ::selectionで体験の解像度を一段階上げる方法
Webサイトのデザインにおいて、フォントサイズや余白には徹底的にこだわるのに、「テキストを選択した時のハイライト色」をブラウザのデフォルトに任せっぱなしにしていませんか？
これ、正直に言います。非常にもったいない。
ユーザーがテキストをマウスでなぞる瞬間というのは、そのコンテンツを「自分のものにしようとしている」能動的なアクションです。そこにブランドの世界観と乖離した「OSデフォルトの青色」がボヤッと浮かび上がるのは、映画の世界観に急にコンビニのレジ袋が映り込むようなノイズになります。
今日は、CSSの`::selection`擬似要素を使って、プロダクトの細部まで「手入れが行き届いている」と思わせるための知見を共有します。
::selectionとは何者か
`::selection`は、ユーザーがドラッグして選択したテキストのスタイルを上書きできるCSS擬似要素です。仕様としては非常にシンプルですが、意外と知られていないのが「すべてのCSSプロパティが効くわけではない」という点です。
ブラウザが裏側でやっていること
ブラウザは、ユーザーがマウスドラッグを開始すると、内部的に「選択範囲オブジェクト（Range）」を生成し、対象のノードに対してこの`::selection`スタイルを動的に適用します。
ここで注意すべきは、適用可能なプロパティが限定的であることです。
- `color`
- `background-color`
- `text-shadow`
- `text-decoration`
- `caret-color`（※注意：厳密には別枠ですが、選択と関連してセットでいじることが多い）
`display: block`にしたり、`padding`を無理やり乗せたりしようとすると、ブラウザは「おっと、そこまでは許可していないぞ」と冷たく弾きます。あくまで「テキストの表示状態」を修飾するためのもの、と割り切りましょう。
現場で即戦力となる「品のある」実装例
ただ色を変えるだけでは芸がありません。重要なのは「背景色とのコントラスト」と「ブランドカラーの調和」です。
以下に、実務のプロジェクトにそのままコピペして使える、堅実かつモダンな設定例を置きます。
/ サイト全体に適用する場合：ルートに指定するのが鉄則 /
::selection {
/ 背景色はブランドカラーから彩度を落としたものを選ぶと上品です /
background-color: rgba(255, 100, 50, 0.3);
/ テキスト色は背景色とコントラスト比（WCAG 2.1準拠）を確保 /
color: #333;
/ テキストシャドウで少しだけ立体感を出すテクニック /
text-shadow: none;
}
/ 特定のブロックだけ差別化したい場合（コードブロックなど） /
.code-block ::selection {
background-color: #444;
color: #fff;
}
なぜ`::selection`を単独で書くべきなのか
よくある失敗として、`::selection`と全称セレクタで指定してしまうケースがありますが、これはパフォーマンス的にも設計的にもあまり褒められたものではありません。
CSSの仕様上、`::selection`は他のセレクタと連結（例：`p::selection`）することが推奨されています。また、ベンダープレフィックスに関しては、今のモダンブラウザであれば不要ですが、古いWebView等をサポートする必要がある環境では `-moz-::selection` を併記してあげるのが、シニアエンジニアとしての「保険」です。
注意点：UXを損なわないために
この技術は諸刃の剣です。デザイナーが「ブランドカラーで塗りつぶしたい！」と意気込んで、視認性が極端に悪い（背景色とテキスト色が同化して読めなくなる）設定にしてしまうことが多々あります。
- コントラスト比は正義: 選択された文字が読めなければ、ユーザーは情報のコピペも引用もできません。
- やりすぎない: 選択範囲に派手なアニメーション（`transition`など）を適用することはできませんし、無理にトリッキーな装飾を施すと、OS側の操作感と喧嘩して違和感に繋がります。
最後に：職人は細部に宿る
フロントエンド開発において、「動く」のは当たり前です。その先の「心地よい」を提供できるかどうかが、プロとそうでない人の分かれ目です。
「たかが選択範囲の色」と思うかもしれませんが、こういった細かなUIのケアを積み重ねることで、サイト全体の品質に対するユーザーの信頼感は確実に底上げされます。
皆さんのプロジェクトでも、今日からぜひ、OSのデフォルトカラーに別れを告げて、自社のカラーを忍ばせてみてください。こういった小さなこだわりこそが、のちに「このサイト、何か分からないけど使いやすいよね」という評価に繋がっていくのですから。
コメント