【入門編】::selectionによるインライン要素の選択範囲装飾 – HTML実践ガイド

テキスト選択時の「色」を変えて、Webサイトに魔法のような個性を！`::selection`活用術

Webサイトを眺めているとき、気になった文章をマウスでドラッグして「選択」すること、よくありますよね。そのとき、デフォルトの「青い背景に白抜き文字」がパッと現れる様子、皆さんはどう感じていますか？

実は、あの「選択したときの色」はCSSの力で自由に変えられるんです。しかも、単に全体の色を変えるだけでなく、「ここをドラッグしたときはこの色、あっちをドラッグしたときはあの色」というように、HTMLのタグごとに細かく演出することもできるんですよ。

今回は、Webサイトにちょっとした「遊び心」と「ブランド感」をプラスする、`::selection`という魔法のCSSについて、優しく解説していきますね。

—

お洋服屋さんで例えるなら、お店の雰囲気に合わせて試着室のカーテンの色を変えるようなものです。

例えば、落ち着いたカフェのサイトなら「柔らかいベージュの選択色」に。逆に、クールなエンジニアの技術ブログなら「目に優しいネオングリーンの選択色」に。たったこれだけのことですが、ユーザーは「あ、このサイトは細かいところまで丁寧に作られているな」と、直感的に感じ取ってくれるはずです。

—

`::selection`は、CSSの「擬似要素」と呼ばれるものです。難しそうに聞こえるかもしれませんが、「ユーザーがテキストをマウスでなぞった（選択した）とき、その部分にだけ適用される特別なルール」だと考えてみてください。

まずは、ページ全体の選択色を変える基本形を見てみましょう。

/ ページ全体で選択したときの色を変える /
::selection {
background-color: #ffcc00; / 黄色の背景 /
color: #333; / 文字は濃いグレーに /
}

たったこれだけで、あなたのサイトの「選択体験」がオリジナルのものに変わります。

—

ここからが本題です。`a`タグや`strong`タグ、`code`タグなど、インライン要素ごとに色を変えることで、サイトに驚くほどの深みが出ます。

例えば、「強調（strong）した部分は情熱的な赤に」「コード（code）部分はエンジニアっぽいダークモード風に」といった使い分けです。

以下のコードをコピーして、ご自身のCSSファイルに貼り付けてみてください。

/ 全体のデフォルト設定 /
::selection {
background-color: #eee;
color: #000;
}

/ 強調したい部分(strong)は情熱的な赤に /
strong::selection {
background-color: #ff6b6b;
color: #fff;
}

/ プログラミングのコード(code)は黒板のような色に /
code::selection {
background-color: #2d3436;
color: #fab1a0;
}

/ リンク(a)は少し落ち着いた青に /
a::selection {
background-color: #74b9ff;
color: #000;
}

人間は無意識のうちに、色で情報を区別しています。「赤い選択色」が現れたら「お、ここは大事な場所なんだな」と視覚的に理解できる。これこそが、Webデザインにおける「直感的な操作性」の正体です。

—

ここで一つ、初心者の皆さんがつまずきやすいポイントを共有しておきますね。

それは、「背景色（background-color）と文字色（color）のコントラスト」です。

あまりに奇抜な色を選んでしまうと、選択したあとに文字が全く読めなくなってしまうことがあります。これはアクセシビリティ（使いやすさ）の観点から見ると、ちょっと悲しいですよね。

—

`::selection`を使ったカスタマイズは、決して必須の機能ではありません。でも、こうした「誰も見ていないかもしれないけれど、実はこだわっている」というディテールこそが、あなたのWebサイトを「どこにでもあるサイト」から「世界に一つだけの愛されるサイト」へと進化させてくれます。

まずは、自分の名前や好きな言葉をHTMLの``で囲って、この魔法をかけてみてください。マウスでなぞった瞬間、きっと「おっ！」と声が出るはずですよ。

もし分からないことがあれば、いつでも何度でも聞いてくださいね。皆さんのWeb制作ライフが、もっと楽しくなるよう応援しています！