今回はかなり細かい小ネタになりますが、大きな印象付けができるテクニックになります。タイトルの通りですが、テキストの選択時にハイライトされる背景色をCSSを使って変更するというものです。
テキストを選択させる機会もあまり無いかと思いますが、デザインのアクセントになりますので、設定しておいて損はないかと思います。実装方法も簡単ですので、気軽に試してみてはいかがでしょうか。では早速コードになります。
// HTML
<p class="highlight">この文章を選択すると、通常とは異なるハイライトカラーで表示されます。
</p>
// CSS
.highlight::selection,
.highlight::-moz-selection {
background: #f00;
color: #fff;
}
たったこれだけで、ハイライトカラーを変更することができます。実装方法ですが、CSSで対象の要素に「::selection 疑似要素」として設定するだけです。古いFirefoxに対応させる場合にはベンダープレフィックスを付ける必要があります。ちなみに背景色だけでなく文字色も変更することができます。実際に下記のテキストを選択してみてください。
このテキスト部分のみ、選択するとハイライトカラーが変わってるのが確認できます。
かなり細かいデザインになりますが、アプリなどのUIデザインにおいては、より強調させたいときに使えるのではないでしょうか。もちろんデザイン面でもオリジナリティを表現できるので使いどころはたくさんありそうですね。
