【CSS】マウスで選択したテキストの色を変える

こんにちは！WEBデザイナーのこたです。

Webサイトを見ているときにマウスでクリックして記事をコピペすることがありますよね？

コピペするときにテキストに薄い青色が引かれると思います。

あるWebサイトではこのクリックしてコピペしたときに色が変わるというデザインを見ました。

Webサイトにはテーマカラーがありますが、テキストのコピペまでデザインにこだわる意欲がすごいと思い、自分も見習いたいと思い、この記事を書いてみました。

このようにテキストを選択したときのハイライト色を変更したり、テキストの色をCSSで変更することができます。

テキストを選択したときのハイライト色を変更方法

::selection{
//選択されたテキストにスタイルを適用
}

「::selection」セレクタを使うと、ユーザーが選択したテキストのハイライト色を変更できます。

このセレクタの使い方は難しくありませんが、ふたつの注意点があります。

セレクタがCSSの標準に含まれていない

まず、このセレクタは現在のところCSSの基準仕様に含まれていないということです。

非公式でありながら多くのブラウザがサポートしていて、IE9以降に登場したブラウザすべて対応しています。

ただし、Firefoxに対応するためにはベンダープリフィックスをつけて、「::-moz-selection」というセレクタを書く必要があります。

::-moz-selection{
//【Firefox】選択されたテキストにスタイルを適用する
}

「::selection」のスタイルが使えるプロパティが限られる

「::selection」のスタイルには、次のプロパティにしか使えないので注意が必要です。

簡単に言えば、背景色とテキスト色は設定できますが、それ以外のことはできませんし、背景を画像にすることもできません。

なので、用途が限られてしまうので使う場合は注意しましょう。

colorプロパティ

See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

backgroundプロパティ

See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

background-colorプロパティ

See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

text-shadowプロパティ

See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

まとめ

テキストを選択したときのハイライト色は簡単にCSSで設定可能なので、もしデザインにこだわりたいという方は設定してみてはいかがでしょうか？

「::selection」は非公式ではありますが、よく使われるWebデザイン技法なので、ぜひ参考になれば嬉しいです。