選択中のテキストカラーを自由に変えるCSS

PCでサイトを見ていると、たまに「サイト上のテキストをドラッグで選択する」ことがあります。

これです

これ、デフォルトだと真っ青なのですが、cssにたった一行加えるだけで好きな色に変えることができます。

選択した文字のスタイルを変える方法

::selection {
  background-color:  #123456; //お好きな色に
}

セレクタ「::selection」を使うと、ドラッグで選択した文章(厳密にいうと画像なども全て対象)のスタイルを自由に変えることができます。

ちなみに、設定できるのはbackground-colorだけではありません。
以下のプロパティが設定可能です。

• color (文字色)
• background-color (背景色)
• cursor (カーソルの形)
• caret-color (入力欄のキャレットの色 ※IE不可)
• outline (境界線)
• text-decoration (下線とか打消し線とか)
• text-emphasis-color (傍点の色 ※text-emphasisはIE不可)
• text-shadow (テキストのシャドウ)

気を付けたいこと

スマホでウェブサイトを見るスタイルが主流になりつつある現在はそこまで需要が高くないかもしれませんが、個人的にはこういう細部の細部まで工夫されたサイトは見ていてワクワクします。

ただ、気を付けたいのは、「アクセシビリティを損なわないように細心の注意をはらって実装すること」です。
選択時の変化がものすごく少なかったり、コントラストが小さくて見えづらかったり、色覚の関係で見づらい色の組み合わせだったりすると、人によっては著しくサイトの「見やすさ」が損なわれることになります。

ウェブサイトの「おしゃれ」や「楽しい」や「わくわく」は、大前提として「快適」の上に成り立っていることを忘れないようにしたいですね(自戒)

そういう部分に気を付けつつ、よかったら試してみてください。

おまけの話

今回掲載した2番目のサンプルは、アニメーション映画「プロメア」をイメージして作ってみたものでした。

プロメア公式サイトはこちら

戦闘シーンもストーリーも激アツの最高な映画でした…

特徴的なカラーリングなので要点さえ押さえれば比較的簡単にまねできるかな？ と思ってやってみたのですが、実際フタを開けてみたらめちゃくちゃ難しかったです。

何が難しいって、あの配色、それぞれは素敵な色なんですけど、適当に組み合わせると視認性が壊滅的に悪くなるんですよね。
背景の黄色の扱いに苦心して何度もやり直しました。この記事にかかった時間の7割はそこに割いてます。(本当はまだ満足いってない)

普通は個性のある色を多用する時って、無彩色を大部分の面積に置いて色同士が接さないようにするのが視認性を保つための基本的なテクニックなんですけど、プロメアは無彩色をほとんど使わずに(使う時も真っ白や真っ黒などの、デザイン的にはタブーとされやすい極端な色を効果的に使っている！)色同士を接触させまくってるんですよね、でもあの不思議な調和がある。

色彩監督をつとめられた垣田由紀子さんのスゴさを再認識した一件でした。

おそ松さんとかBNAとかも配色超かっこいいよね！！！

今(2021.2現在)ならPrime Videoでプロメア配信中だから登録してる方は見てね！！！！！！！