【選択した文字色や背景色を変更】::selectionの使い方【CSS擬似要素】

今回はCSSの擬似要素の1つである、::selectionについてまとめたいと思います。

::selectionを使うと、
クリックやドラッグなどで選択した文章に指定した装飾を適用できます。

web上の文章をドラッグすると、文字の背景が水色になりますよね。
::selectionを使うと、背景色やフォントの色をカスタマイズできるイメージです。

::selectionを使った具体例

こんなかんじのサンプルを作ってみました。

See the Pen
by notebook (@orange-notebook)
on CodePen.

文章を選択すると、文章の背景が赤、文字色が白に変わります。
けっこう背景色が変わるだけで印象も変化しますよね。

ではCSSでの指定方法についてみていきましょう〜。

::selectionの指定方法

::selectionを指定する方法はとても簡単です。
文章全体に指定する場合、下記のように背景色と文字色を指定するだけで設定できます。

::selection {
  background-color: #FF6347;
  color: #fff;
}

今回の例では、h2タグとpタグを使っていますが、これでどちらも適用されています。

なお、::selectionは設定できるプロパティが限られています。

background-imageは使えないので注意しましょう。

参考：MDN CSS ::selection

文章の一部分に指定する場合

先ほどの例では文章全体に、背景色と文字色の変更が適用されましたが
一部分のみに指定することもできます。

指定方法はこんなかんじです。

p::selection {
  background-color: #FF6347;
  color: #fff;
}

pタグに対して指定しているので、
pタグにのみ適用され、h2タグは選択されても通常の青色の背景になります。

See the Pen
by notebook (@orange-notebook)
on CodePen.

先ほどのサンプルとほぼ同じですが、今回はpタグだけに::selectionを指定してみました。
h2を選択状態にしても、背景色は青のままなので試してみてください。

おわりに

いかがでしたでしょうか。
意外と簡単に設定することができますよね。

最後までお読みいただき、ありがとうございました！

【2パターン紹介】画像にCSSでオーバーレイをつける方法オーバーレイを画像に重ねることってありますよね。 画像の上にテキストを配置するときも、画像とテキストのコントラストを保つために必要だったりします。 今回は画像にオーバーレイをつける方法を2種類ご紹介したいと思います。...

【CSS】要素をど真ん中に配置する方法【3つ紹介】要素をど真ん中に配置したいことってありますよね。 ヒーローイメージでも文章などのコンテンツが、ど真ん中に配置されていることも多いのではないでしょうか。 今回は要素を縦にも横にも真ん中に配置する方法を2つ挙げたいと思います。 1.display: flex;を使った方法 2.position: absolute;を使った方法 ではそれぞれもう少し詳しく見ていきましょう。...