CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでテキスト選択時のデフォルト色を変更する方法｜::selectionの使い方

Webページ上でテキストをドラッグして選択すると、通常は青っぽいハイライトが表示されます。このデフォルトの選択色は、CSSの ::selection 疑似要素を使うことで、文字色や背景色を自由に上書きできます。

以下に、選択時のハイライトを紫背景・白文字にカスタマイズするサンプルコードを示します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
   /* Firefox向け（旧バージョン対応） */
   ::-moz-selection {
      color: rgb(255, 255, 255);
      background: rgb(118, 69, 231);
   }
   /* 標準的なブラウザ向け */
   ::selection {
      color: rgb(255, 255, 255);
      background: rgb(118, 69, 231);
   }
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   p {
      font-size: 40px;
   }
</style>
</head>
<body>
<h1>テキスト選択色のサンプル</h1>
<h2>テキストを選択すると、選択色の変化を確認できます</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto consequuntur fugiat 
doloremque adipisci vero iste soluta ea ut! Exercitationem rem dolore delectus modi 
repellat quo mollitia temporibus laudantium, alias itaque tempora, iure voluptatem 
non voluptas, deleniti laborum? Cum ducimus unde, vitae consequuntur nobis dignissimos 
similique officia possimus quis necessitatibus praesentium!
</p>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

CSSでテキスト選択時のデフォルト色を変更する方法｜::selectionの使い方

実際にテキストをドラッグして選択すると、下のスクリーンショットのように、指定した紫色の背景と白色の文字に切り替わります。

CSSでテキスト選択時のデフォルト色を変更する方法｜::selectionの使い方

ポイントの解説

  • ::selection：Chrome、Edge、Safariなど主要ブラウザで動作する標準の疑似要素です。選択範囲に適用できるプロパティは color、background-color、text-shadow などに限られます。
  • ::-moz-selection：かつてのFirefoxでは標準の::selectionがサポートされていなかったため、ベンダープレフィックス付きのこちらが必要でした。現在のFirefoxは::selectionに対応していますが、古い環境への互換性を考慮して併記しておくと安心です。
  • ブランドカラーやサイトデザインに合わせて選択色を変更することで、細部まで統一感のあるユーザー体験を提供できます。
  1. CSSで光るテキスト（グロー効果）を作成する方法

    CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {

  2. CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

    CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1