Webデザイン

CSSで文字を選択(ドラッグ)した時の背景色を変える

Webデザイン

WEBサイトのテキスト部分の可視性をアップしてくれるCSSテクニックをご紹介します。
まだ使えるブラウザは限られていますがとても簡単に実装できるのでおすすめです。

使い方

/* = Selected Text
----------------------------------------------- */
::selection {
  background:#d4dcd6; /* Safari */
}

::-moz-selection {
  background:#d4dcd6; /* Firefox */
}

::selectionタグで実装できます。
上記のコードをCSSファイルのわかりやすい箇所にコピペしてお使い頂ければOKです。
カラーはお好みのものに差し替えて下さいね。
とっても簡単なのに、文字の可視性がグンとアップします!
以下のようになりますよ。

drag

対応ブラウザ(2012/1時点)

  • Chrome16
  • Safari
  • Firefox
  • IE9

主要なブラウザは対応しているのでひとまず安心して使えそうです。
ぜひ使ってみて下さいね。

comment

  1. ごん丸 より:

    初コメントです。
    こちらの記事を読んで自分のサイトに適応させてみました。
    ありがとうございます!

タイトルとURLをコピーしました