BLOG ブログ

> ブログ

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

WEBデザインを決めているときに、デザイナーとしては細かいところまでデザインを統一して決めたいときがあります。
それは、文字の色やリンクの色などもあります。
意外と知られていないところでいうと、テキストを選択したときのハイライト色も変更することができるんです。
デフォルトでは薄い青色ですが、黄色やグレーなどCSSで自分好みにカスタマイズできます。

今回は「テキストを選択したときのハイライト色を指定する方法」についてご紹介いたします。

CSSでハイライト色を変更する

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

::selectionセレクタを使うと、ユーザーが選択したテキストのハイライト色を変更できます
このセレクタの使い方は難しくありませんが、ふたつの注意事項があります。

まず、このセレクタは現在のところCSSの標準仕様に含まれていない、非公式のものだということです。
::selectionは非常に多くのサイトで使われていて、非公式でありながら多くのブラウザがサポートしています。
ただし、注意点はFirefoxに対応するためにはベンダープリフィックスをつけて、::-moz-selectionというセレクタを書く必要があります。

ベンダープリフィックスとは?
「ベンダープレフィックス」とは、ChromeやFirefox、SafariといったブラウザーのベンダーがCSS3の拡張機能を実装するのに使用する識別子のことです。
CSS3のプロパティの頭に「–webkit-」や「–moz-」を付けてCSS3の仕様を先行して実装するときに利用します。

::selectionのスタイルには、次のプロパティしか使えません。
簡単に言えば、背景色とテキスト色は設定できますが、それ以外のことはできません。
背景を画像にすることはできません。

::selectionのスタイルで使えるプロパティ

  • colorプロパティ
  • backgroundプロパティ
  • background-colorプロパティ
  • text-shadowプロパティ

まとめ

::selectionを使ってできることは限られていますが、細かい点までデザインをするには使えるプロパティです。
CSS3の仕様からは外れていますが便利なCSSです。
ぜひ、細かい点までこだわってみてくださいね!