MEDIAWordPressアドセンスSearchConsoleアナリティクスレンタルサーバードメインCSSのselectionで選択したテキストの色を変更するやり方2020.01.21CSSCSSの書き方HOMECSSCSSのselectionで選択したテキストの色を変更するやり方ときどき、検索して開いたサイト先で記事を読んでるとテキストの途中で分からない単語があります。そんなときコピペして調べたりするのですが、コピーする際にテキストを選択してハイライト(強調)された色が変更してある場合があります。このようなやり方はCSSのselectionという擬似要素を使用すると、選択したテキストでハイライトされた色を変更することができるようなのですね。具体的には、選択したテキストの色を変更するやり方をCSSでどうすればいいのだろう?という疑問が生まれたので、やったことのない私は実際にやってみました。テキストを選択するときに表示される色をサイトの配色に合わせるなどのときに活用できそうです。まとめCSSのselectionの使い方をまず覚えようまず選択したテキストの色を変更できるやり方で覚えたいのがCSSのselectionの使い方です。基本的な使い方としてCSSのselectionは以下のようにCSSのセレクタにして使用できます。background:tomato;}上記CSSの場合、選択したテキストでハイライトする背景色がトマト色になります。CSSのセレクタで指定するときには::selectionと指定するのですが、単一のコロンではなく二重コロンをselectionの先頭に記述して使います。selectionの先頭に二重コロンを付けるということは、CSSのselectionは「擬似要素」を作り出しているということになりますね。Advertisementまた、セレクタに::selection指定をして選択したテキスト背景色の擬似要素を作り出したやり方の場合、::selectionの指定範囲はページ全体が範囲対象になります。実際にCSSでセレクタに::selectionを指定して、選択したテキストの色をbackgroundプロパティの値で分かりやすい背景色redを指定して確認してみました。上の画像のように::selectionだけをセレクタにした場合は、ページの全ての要素が選択対象になり、CSSで変更した色が適用されます。範囲要素を決めて一部分だけに色を変更するやり方は後述します。::selectionをセレクタにして使用できるプロパティは限られるようです。colorbackground(background-color、background-image)text-shadowなるほど、覚えておいた方が良さそうですね。::selectionで動作するプロパティ以外を使用したやり方をしてしまうと、当然「CSSでselectionが効かないで選択したテキストの色が変更できない」となってしまいますからね。::-moz-selectionもセレクタに使おうもう一つ覚えておきたいことがあります。moz-selectionも指定して使おうってことです。background:tomato;}またIE8以下は未対応です。CSSで::selectionを使用する基本を一旦まとめておくとCSSのセレクタに::selectionと二重コロンをつけて指定Firefox用のベンダープレフィックス付き::-moz-selectionも使用する::selectionはIE8以下は未対応です。覚えることは少ないので楽ですね。次は実際にテキストを選択した色を変更してみましょうかね。選択したテキストの文字の色を変更するやり方は、CSSの::selectionセレクタに文字の色を変えることができるCSSのcolorプロパティを指定します。color:tomato;}指定したcolorプロパティの値に選択したテキストの文字色を変更したい色のコードで記述します。実際には上の画像のように選択したテキスト部分の文字の色が適用した色でハイライトされます。難しいやり方かと思ってたけど地味に簡単ではありませんか。選択したテキストの背景色を変更する場合は、CSSでセレクタを::selectionにして、プロパティにbackground-colorを指定します。あとはbackground-colorの値で変更する背景色の指定をします。background-color:tomato;}そうすると、テキスト選択時にハイライトされた色が、background-color指定した値の色に変更できます。Advertisement背景色がテキストをどのようにスペースを埋めるかに注意した方が良さそうです。いうのも選択したテキストと、変更してハイライトされた背景色が似てしまうと、ハイライトした選択範囲が見づらくなってしまうからです。いい感じに配色調整が必要ですが、逆に配色のやり方のほうが悩むかもです。選択したテキストに影を付けるようにする場合、そしてその影に色も付ける場合です。CSSでtext-shadowプロパティを使います。tomato;}text-shadowでテキストを選択してハイライトした文字に影を作ることができます。変更する色はtext-shadowで適用する影の色を変更しているので、このときcolorプロパティも指定して文字色の変更をすることで、影と調和する組み合わせでもいいかもしれません。CSSで範囲要素を決めて色を変更ここままでのCSSのselectionを使用してテキストを選択した色を変更するやり方は、セレクタをに::selectionだけ指定していました。そのためCSSを適用するページ全体に::selectionが反映されます。なく、テキストを選択して色が変更になる範囲要素を決めて::selectionを適用したい場合、つまりサイトの一部分だけでテキストを選択した色の変更がしたい場合のやり方です。tomato;}たとえば、上のCSSのようにpタグでマークアップしている要素だけというやり方で、選択したテキストには影を付けて色変更したい場合。セレクタの::selectionと一緒にpも指定します。するとサイトのpタグでマークアップしてる要素のテキストが選択されたときだけCSSで変更した色が適用できます。まとめ色々なサイトでテキストを読んでいてコピーしようかなと思ったとき、選択したテキストの色が変更している場合は、今回のやり方を使用していることが多いのかもしれません。テキストを選択状態にしないと気づかない部分ではありますが、ちょっとしたこだわりをサイトに出してみたいという場合には、選択したテキストの色を変更したことによって見づらくならないよう配慮して、実装してみるのも良いのではないでしょうか。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2019.09.25CSSのdisplayプロパティでHTMLの要素が形成するボックスを調整することができます。CSSでレイアウトを組むとき。2019.12.11CSSのfixedを使用してメニューや画像を固定するには、どのようにすればできるのか試しました。WordPress.。