クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【css】テキストだけを強調(ハイライト)して色を変更するselectionの使い方!

f:id:clrmemory:20171121143654p:plain

こんにちはクリアメモリです!

先日、cssで強調(ハイライト)の色を変更する方法を公開しました。その記事の中で、テキストだけを強調表示させることができると書きました。

そこで今回は、cssでテキストだけを強調(ハイライト)して色を変える方法を紹介します。

 

はじめに

 

今回紹介する内容は

cssでテキストだけを強調(ハイライト)して色を変更する方法」

です。

 

実際にテキストの強調色を設定すると、サイト内のテキストをドラッグした時に、以下のような色を設定できるようになります。

 

f:id:clrmemory:20171023124409p:plain

 

それぞれの要素にハイライト時の色を設定しました。

 

背景の強調色

 

先日の記事で、背景の強調色を変更する方法を紹介しています。

 

www.clrmemory.com

 

似たような方法で実装できるので、こちらもぜひ試してみてください。

では、さっそくテキストの強調色を調整しましょう。

 

使うのはselection!

 

使用するcssは、ハイライトの背景色を設定した時と同様「selection」を使用します。

ベースはこちら!

 

p::selection {

}

 

ここに、テキストの色を設定するためのコードを記述していくわけですね。

では実際のコードを見ていきましょう。

 

テキストの強調色を変更する

 

今回は、テキストがハイライトされたら「赤色」に変更してみます。

完成したコードがこちら。

 

p::selection {
  color: red;
}

 

このように記述することで、テキストを強調表示させた時の色を「赤」に設定することができました。簡単ですね!

実際にハイライトさせてみると、ちゃんと赤くなるのがわかるかと思います。

 

f:id:clrmemory:20171023125212p:plain

 

テキストだけを強調表示させる

 

ここまでで、テキストの強調色は変更できました。

ですが、今の状態だと背景色がついたままですよね。

先ほど追加したコードを、さらにテキストだけの色を変更するように書き換えてみましょう。

 

p::selection {
  background-color: transparent;
  color: red;
}

 

このようにすることで、背景色はそのまま、テキストの色だけをハイライトさせることができました。

実際の表示を確認してください。

 

f:id:clrmemory:20171023124344p:plain

 

pタグ以外にも使える!

 

今回の記事では、テキスト(p)に強調色を設定しましたが、実は「見出し(h2)」や「リンク(a)」などにも設定できます。

その場合は、pの部分を「h2」や「a」などに書き換えるだけです。

 

h2::selection {
  color: red;
}

a::selection {
  color: red;
}

 

まとめ

 

今回紹介した方法を使えば、テキストをハイライトした時の色を設定することができました。

強調色は「red」だけではなく、「rgba」や「#xxx」などでも設定できるので、サイトのデザインに合わせて調整してみてください。

www.clrmemory.com

 

また、背景を設定する方法も合わせて覚えておきましょう。

ではまた。

新着記事