投稿日：2021年02月10日 デザイン

こんにちは。青山です。

あるWebサイトで、文章をコピーしようとテキストを選択したときに、背景色が浅い緑色（カラーコード：#8ec43e）になったのが印象的でした。

見慣れた青色と違って目を引いたのと、農業に関するサイトだったので野菜の画像や他の緑のテキストともマッチしていました。

テキスト選択時のスタイルを設定する方法

⇒ CSSの「::selection」疑似要素 を使う
ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用できる

コーディング例

・HTML
<p>テキストの背景色を赤にする</p>

・CSS
p::selection {
  background-color: red;
}

機能として必要ではないですが、ユーザーがふとテキストを選択して初めて気づくことになるため、遊び心があっていいなと思いました。