CSSでテキスト選択のハイライトカラーを変更する
CSS今回はかなり細かい小ネタになりますが、大きな印象付けができるテクニックになります。タイトルの通りですが、テキストの選択時にハイライトされる背景色をCSSを使って変更するというものです。
テキストを選択させる機会もあまり無いかと思いますが、デザインのアクセントになりますので、設定しておいて損はないかと思います。実装方法も簡単ですので、気軽に試してみてはいかがでしょうか。では早速コードになります。
// HTML
<p class="highlight">この文章を選択すると、通常とは異なるハイライトカラーで表示されます。
</p>
// CSS
.highlight::selection,
.highlight::-moz-selection {
background: #f00;
color: #fff;
}
たったこれだけで、ハイライトカラーを変更することができます。実装方法ですが、CSSで対象の要素に「::selection 疑似要素」として設定するだけです。古いFirefoxに対応させる場合にはベンダープレフィックスを付ける必要があります。ちなみに背景色だけでなく文字色も変更することができます。実際に下記のテキストを選択してみてください。
このテキスト部分のみ、選択するとハイライトカラーが変わってるのが確認できます。
かなり細かいデザインになりますが、アプリなどのUIデザインにおいては、より強調させたいときに使えるのではないでしょうか。もちろんデザイン面でもオリジナリティを表現できるので使いどころはたくさんありそうですね。
-
-
この記事を書いた人オガワ シンヤ
DesignSupply.代表 ／ ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中！制作中はチョコレートが欠かせない三十路Webクリエイター。
制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら
デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。
ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。
コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。
