Ownedmedia ウェブ制作に役立つコンテンツを発信中!

CSS 2019.07.31

CSSでテキスト選択のハイライトカラーを変更する

Tags: ,

今回はかなり細かい小ネタになりますが、大きな印象付けができるテクニックになります。タイトルの通りですが、テキストの選択時にハイライトされる背景色をCSSを使って変更するというものです。

 

テキストを選択させる機会もあまり無いかと思いますが、デザインのアクセントになりますので、設定しておいて損はないかと思います。実装方法も簡単ですので、気軽に試してみてはいかがでしょうか。では早速コードになります。

// HTML
<p class="highlight">この文章を選択すると、通常とは異なるハイライトカラーで表示されます。
</p>

// CSS
.highlight::selection,
.highlight::-moz-selection {
 background: #f00;
 color: #fff;
}

 

たったこれだけで、ハイライトカラーを変更することができます。実装方法ですが、CSSで対象の要素に「::selection 疑似要素」として設定するだけです。古いFirefoxに対応させる場合にはベンダープレフィックスを付ける必要があります。ちなみに背景色だけでなく文字色も変更することができます。実際に下記のテキストを選択してみてください。

 

このテキスト部分のみ、選択するとハイライトカラーが変わってるのが確認できます。

 

かなり細かいデザインになりますが、アプリなどのUIデザインにおいては、より強調させたいときに使えるのではないでしょうか。もちろんデザイン面でもオリジナリティを表現できるので使いどころはたくさんありそうですね。

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?