Webデザインをワンランクアップ！CSS::selectionで選択範囲をカスタマイズ

::selection の基本的な書き方

::selection {
  background-color: #FFFF00; /* 選択範囲の背景色を黄色に */
  color: #0000FF;          /* 選択範囲の文字色を青色に */
  font-family: monospace;   /* 選択範囲のフォントを等幅フォントに */
}

上記のように、::selection の後ろに中括弧 {} を記述し、その中に適用したいスタイルプロパティを記述していきます。利用可能なプロパティは、背景色、文字色、フォントファミリー、文字の太さ、装飾など、通常の要素に適用できるものとほぼ同様です。

::selection の注意点

ブラウザによって、::selection のデフォルトのスタイルが異なる場合があります。
::selection は、ユーザーが選択したテキストのみを対象とします。他の要素には影響しません。
一部のプロパティは ::selection には無効です。例えば、background-image は無視されます。

::selection の応用例

特定の単語やフレーズを選択した際に、異なるスタイルを適用する
選択範囲にハイライト効果を適用する
選択範囲を分かりやすくするために、背景色や文字色を変更する

::selection以外にも、::before や ::after といった擬似要素が存在します。これらの擬似要素は、要素の特定の部分にスタイルを適用するために使用されます。

::before は、要素の前に疑似要素を生成し、その要素にスタイルを適用します。::after は、要素の後に疑似要素を生成し、その要素にスタイルを適用します。

例1：選択範囲を青色背景と白文字にする

::selection {
  background-color: #0000FF;
  color: #FFFFFF;
}

例2：選択範囲に太字と下線を適用する

::selection {
  font-weight: bold;
  text-decoration: underline;
}

例3：選択範囲ごとに異なるスタイルを適用する

p::selection {
  background-color: #FFFF00;
  color: #0000FF;
}

h1::selection {
  background-color: #FF0000;
  color: #FFFFFF;
}

::selection {
  background-color: yellow;
  color: black;
}

::selection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: -1;
}

このような制限を回避するために、::selection の代替方法として以下の方法が考えられます。

JavaScript を使用する

JavaScript を使用して、ユーザーがテキストを選択した際に、その範囲を取得し、スタイルを動的に適用することができます。この方法であれば、::selection で無効なプロパティも適用することができ、ブラウザ間の差異も吸収することができます。

document.addEventListener('selectionchange', function() {
  const selection = window.getSelection();
  selection.forEach(range => {
    range.addStyle('background-color', 'yellow');
    range.addStyle('color', 'blue');
  });
});

カスタム要素を使用する

Web Components を使用して、カスタム要素を作成し、その要素内でテキストを選択した際にスタイルを適用することができます。この方法であれば、よりカプセル化されたスタイルを記述することができ、メンテナンス性も向上します。

<my-selectable-text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam eget tellus ullamcorper ullamcorper.
</my-selectable-text>

my-selectable-text::selection {
  background-color: yellow;
  color: blue;
}

ライブラリを使用する

Highlight.js や Selectr など、::selection の代替機能を提供するライブラリがいくつか存在します。これらのライブラリを使用することで、より簡単に、様々な機能を持った選択範囲スタイルを実装することができます。

それぞれの方法の利点と欠点

方法	利点	欠点
JavaScript	柔軟性が高い、ブラウザ間の差異を吸収できる	やや複雑
カスタム要素	カプセル化、メンテナンス性が高い	Web Components の知識が必要
ライブラリ	簡単、様々な機能を利用できる	ライブラリに依存する

最適な方法の選択

::selection の代替方法を選択する際には、以下の点を考慮する必要があります。

プロジェクトの規模
開発者のスキル
必要とされる機能