CSSのselectionで選択したテキストの色を変更するやり方

CSSのselectionで選択したテキストの色を変更するやり方

ときどき、検索して開いたサイト先で記事を読んでるとテキストの途中で分からない単語があります。そんなときコピペして調べたりするのですが、コピーする際にテキストを選択してハイライト(強調)された色が変更してある場合があります。

このようなやり方はCSSのselectionという擬似要素を使用すると、選択したテキストでハイライトされた色を変更することができるようなのですね。

 

具体的には、選択したテキストの色を変更するやり方をCSSでどうすればいいのだろう?という疑問が生まれたので、やったことのない私は実際にやってみました。

テキストを選択するときに表示される色をサイトの配色に合わせるなどのときに活用できそうです。

 

CSSのselectionの使い方をまず覚えよう

 

まず選択したテキストの色を変更できるやり方で覚えたいのがCSSのselectionの使い方です。

基本的な使い方としてCSSのselectionは以下のようにCSSのセレクタにして使用できます。

 

::selection{
 background:tomato;
}

 

上記CSSの場合、選択したテキストでハイライトする背景色がトマト色になります。

そしてCSSのセレクタで指定するときには::selectionと指定するのですが、単一のコロンではなく二重コロンをselectionの先頭に記述して使います。

selectionの先頭に二重コロンを付けるということは、CSSのselectionは「擬似要素」を作り出しているということになりますね。

Advertisement

また、セレクタに::selection指定をして選択したテキスト背景色の擬似要素を作り出したやり方の場合、::selectionの指定範囲はページ全体が範囲対象になります。

実際にCSSでセレクタに::selectionを指定して、選択したテキストの色をbackgroundプロパティの値で分かりやすい背景色redを指定して確認してみました。

 

 

上の画像のように::selectionだけをセレクタにした場合は、ページの全ての要素が選択対象になり、CSSで変更した色が適用されます。範囲要素を決めて一部分だけに色を変更するやり方は後述します。

そして::selectionをセレクタにして使用できるプロパティは限られるようです。

 

  • color
  • background(background-color、background-image)
  • text-shadow

 

なるほど、覚えておいた方が良さそうですね。

::selectionで動作するプロパティ以外を使用したやり方をしてしまうと、当然「CSSでselectionが効かないで選択したテキストの色が変更できない」となってしまいますからね。

 

::-moz-selectionもセレクタに使おう

 

もう一つ覚えておきたいことがあります。

CSSで::selectionを使うときに、Firefoxはベンダープレフィックス付きの::-moz-selectionを指定しないと適用されないので::- moz-selectionも指定して使おうってことです。

 

::-moz-selection{
 background:tomato;
}
::selection{
 background:tomato;
}

 

またIE8以下は未対応です。

CSSで::selectionを使用する基本を一旦まとめておくと

 

  • CSSのセレクタに::selectionと二重コロンをつけて指定
  • Firefox用のベンダープレフィックス付き::-moz-selectionも使用する
  • ::selectionはIE8以下は未対応

 

です。覚えることは少ないので楽ですね。

次は実際にテキストを選択した色を変更してみましょうかね。

 

選択したテキストの文字色を変更するやり方

 

選択したテキストの文字の色を変更するやり方は、CSSの::selectionセレクタに文字の色を変えることができるCSSのcolorプロパティを指定します。

 

::-moz-selection{
 color:tomato;
}
::selection{
 color:tomato;
}

 

指定したcolorプロパティの値に選択したテキストの文字色を変更したい色のコードで記述します。

 

 

実際には上の画像のように選択したテキスト部分の文字の色が適用した色でハイライトされます。

もっと難しいやり方かと思ってたけど地味に簡単ではありませんか。

 

選択したテキストの背景色を変更するやり方

 

選択したテキストの背景色を変更する場合は、CSSでセレクタを::selectionにして、プロパティにbackground-colorを指定します。あとはbackground-colorの値で変更する背景色の指定をします。

 

::-moz-selection{
 background-color:tomato;
}
::selection{
 background-color:tomato;
}

 

 

そうすると、テキスト選択時にハイライトされた色が、background-color指定した値の色に変更できます。

 

Advertisement

背景色がテキストをどのようにスペースを埋めるかに注意した方が良さそうです。

というのも選択したテキストと、変更してハイライトされた背景色が似てしまうと、ハイライトした選択範囲が見づらくなってしまうからです。いい感じに配色調整が必要ですが、逆に配色のやり方のほうが悩むかもです。

 

選択したテキストの文字に影を付けて変更するやり方

 

選択したテキストに影を付けるようにする場合、そしてその影に色も付ける場合です。CSSでtext-shadowプロパティを使います。

 

::-moz-selection{
 text-shadow:4px 3px 4px tomato;
}
::selection{
 text-shadow:4px 3px 4px tomato;
}

 

 

 

text-shadowでテキストを選択してハイライトした文字に影を作ることができます。変更する色はtext-shadowで適用する影の色を変更しているので、このときcolorプロパティも指定して文字色の変更をすることで、影と調和する組み合わせでもいいかもしれません。

 

CSSで範囲要素を決めて色を変更

 

ここままでのCSSのselectionを使用してテキストを選択した色を変更するやり方は、セレクタをに::selectionだけ指定していました。そのためCSSを適用するページ全体に::selectionが反映されます。

そうではなく、テキストを選択して色が変更になる範囲要素を決めて::selectionを適用したい場合、つまりサイトの一部分だけでテキストを選択した色の変更がしたい場合のやり方です。

 

p::-moz-selection{
 text-shadow:4px 3px 4px tomato;
}
p::selection{
 text-shadow:4px 3px 4px tomato;
}

 

たとえば、上のCSSのようにpタグでマークアップしている要素だけというやり方で、選択したテキストには影を付けて色変更したい場合。

セレクタの::selectionと一緒にpも指定します。

 

 

 

そうするとサイトのpタグでマークアップしてる要素のテキストが選択されたときだけCSSで変更した色が適用できます。

 

まとめ

 

色々なサイトでテキストを読んでいてコピーしようかなと思ったとき、選択したテキストの色が変更している場合は、今回のやり方を使用していることが多いのかもしれません。

テキストを選択状態にしないと気づかない部分ではありますが、ちょっとしたこだわりをサイトに出してみたいという場合には、選択したテキストの色を変更したことによって見づらくならないよう配慮して、実装してみるのも良いのではないでしょうか。

CSSカテゴリの最新記事