Webサイトを眺めていて、ふと気になる文章をマウスでドラッグして「選択」したとき、青色や黄色に反転しますよね。あの色、実はWebサイトの「お化粧」の一部として、自由に変えられるって知っていましたか？
今日は、そんなちょっとしたこだわりがサイトの完成度をぐっと高めてくれる、`::selection`（セレクション）という魔法のCSSについてお話しします。「難しそう…」なんて身構える必要は全くありません！ お気に入りの文房具をカスタマイズするような感覚で、一緒に見ていきましょう。
—
そもそも「選択範囲」って何をしているの？
私たちがWebサイトでテキストをマウスでなぞって反転させる動作。あれは、パソコンに対して「ここからここまでをコピーしたいから教えてね！」という合図を送っている状態です。
ブラウザ（ChromeやSafariなど）は、デフォルトの設定で「見やすいように青色で反転させるね」という親切心を持ってくれています。でも、そのWebサイトが「シックで大人っぽい黒とゴールドのデザイン」だったとしたら、突然現れる「鮮やかな青色のハイライト」は、少し浮いて見えてしまうかもしれませんよね。
そんなとき、`::selection`を使えば、そのサイトの世界観に合わせてハイライトの色をコーディネートできるんです。
—
早速コードを書いてみよう！
使い方は驚くほどシンプルです。CSSファイルの中に、たった数行書き加えるだけ。
/ サイト全体の選択時の色をカスタマイズする /
::selection {
background: #ffcc00; / ハイライトの背景色を黄色に /
color: #333; / 選択された文字の色を濃いグレーに /
}
/ 特定のエリアだけ色を変えたい場合 /
.special-text::selection {
background: #ff6b6b; / ここだけ情熱的な赤色に！ /
color: #fff; / 文字は白抜きで読みやすく /
}
ここがポイント！
- background: 反転したときの「背景色」です。
- color: 反転したときの「文字の色」です。
これをCSSに書き足すだけで、Webサイトを訪れたユーザーがテキストを選んだ瞬間、「おっ、このサイト細かいところまで作り込まれているな！」と、ふとした瞬間にファンになってくれるはずです。
—
知っておくと安心！「ブラウザの性格」の話
Webの世界には、色々なブラウザがいます。基本的には、最近のブラウザならどこでもこの`::selection`は仲良く動いてくれます。
ただ、一つだけ「ちょっとしたこだわり」を持っていてほしいことがあります。昔の古いブラウザや、一部の特殊な環境では、この設定が効かないこともあります。でも、「効かなくてもサイトの閲覧には全く支障がない」ので、安心してくださいね。
あくまで「効いたらラッキー、さらに素敵になる！」という、Webサイトの「おまけのオシャレ」として捉えるのが、長く楽しくコーディングを続けるコツですよ。
—
どんな色を選ぶのが正解？
「どの色にすればいいのか迷っちゃう！」という方は、サイトのロゴやボタンに使っている「メインカラー」を少し薄くした色を使ってみるのがおすすめです。
例えば、ボタンが青色なら、ハイライトは「水色」にしてみる。それだけで、サイト全体に統一感が生まれて、プロが作ったような洗練された雰囲気が出ます。
つまずきやすいポイントへのフォロー
「あれ？コードを書いたのに色が変わらないよ！」というときは、一度ブラウザを更新（リロード）してみてください。それでもダメなら、CSSの記述が正しいか、スペルミスがないか確認してみましょう。特に`::`（コロンが2つ）であることは、ちょっとした見落としポイントです。
—
まとめ：小さなこだわりが「愛着」になる
HTMLやCSSを学び始めると、ついつい大きなレイアウトや複雑な機能に目が行きがちです。でも、Webサイトの良さって、こうした「ユーザーが触れたときに返ってくる、ささやかな反応」の積み重ねで決まるんですよね。
`::selection`は、そんな「自分のサイトへの愛着」を形にする第一歩です。ぜひ今日、あなたのWebサイトのハイライト色を、お気に入りの色に変えてみてください。たったそれだけで、画面の中の景色がちょっとだけ自分らしく、特別に見えてくるはずですよ！
また分からないことがあれば、いつでも聞きに来てくださいね。あなたのWeb制作ライフが、もっと楽しくなるよう応援しています！
コメント