CSS3を用いて選択したテキストのスタイルを変更する方法を紹介します。

::selection {background:#1aa;}

基本的にはこの一行で変えることができます。

ただし。このままだとFirefoxには対応していないようなので、以下の記述を追加します。

::selection {background:#1aa;}
::-moz-selection {background:#1aa;}

対応ブラウザは以下の通り。

  • Chrome
  • Safari
  • Firefox
  • Opera
  • IE9+

選択部分の強調は、通常の観覧時には誰も気づかない細かな装飾です。
テキストを選択する必要がある方はかなり少数派でしょうからね。
しかし、あるのとないのとでは印象も評価も大きく変わってきます。

『神は細部に宿る』
そんな言葉がピッタリのスタイルシートの使い方でした。