Webページ上でテキストを選択した際に、その色や背景色を変更したい場合、CSSを使用して簡単に実装することができます。以下にその方法を紹介します。
テキストの色を変える方法
テキストの色を変えるには、::selection疑似要素を使用します。この要素は、ユーザーがテキストを選択したときに適用されます。例えば、次のCSSルールを使用して、選択したテキストの色を赤色に変えることができます。
::selection {
color: red;
}
背景色を変える方法
テキストの背景色を変えるには、同じく::selection疑似要素を使用します。次のCSSルールを使用して、選択したテキストの背景色を青色に変えることができます。
::selection {
background-color: blue;
}
これらのCSSルールをHTMLファイルのstyleタグ内に記述するか、外部のCSSファイルに記述して読み込むことで、Webページで選択したテキストの色や背景色を変更することができます。
よくある質問（FAQ）
Q. CSSで選択されたテキストの色や背景を変更するには？
A. ::selectionセレクタを使います。例：::selection { color: white; background-color: #0070f3; }。ブラウザのデフォルト選択色をブランドカラーに合わせてカスタマイズできます。
Q. 特定の要素だけ選択色を変えるには？
A. .element::selectionのように要素に対してスコープした::selectionルールを設定します。例：.code-block::selection { background-color: #444; }。
Q. テキスト選択を無効にするには？
A. CSSのuser-select: noneを設定します。ドラッグ操作時の意図しない選択を防ぐUIパーツ（ドラッグハンドルなど）に使います。コピーが必要なコードブロックには適用しないよう注意してください。
まとめ
選択したテキストの色や背景色を変更することで、Webページのデザインやユーザーエクスペリエンスを向上させることができます。
例えば、ユーザーが特定のテキストを選択したときに、そのテキストを目立たせるために色を変更することができ、これにより重要な情報やキーワードがユーザーによりよく目立つようになります。
他にもユーザーがWebページ上のテキストを選択したときに、その色や背景色をサイトのテーマやブランドカラーに合わせて変更することができ、これにより、サイト全体の一貫性が保たれ、ユーザーエクスペリエンスが向上します。
