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

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

 

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

はじめに

 

今回紹介する内容は

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

です。

 

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

 

20171023124409

 

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

 

背景の強調色

 

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

 

 

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

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

 

使うのはselection!

 

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

ベースはこちら!

 

p::selection {

}

 

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

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

 

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

 

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

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

 

p::selection {
  color: red;
}

 

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

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

 

20171023125212

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

 

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

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

 

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

 

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

 

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

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

 

20171023124344

 

pタグ以外にも使える!

 

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

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

 

h2::selection {
  color: red;
}
a::selection {
  color: red;
}

 

まとめ

 

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

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

 

 

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

ではまた。

過去にレビューしたアイテム