CSSで文字を選択(ドラッグ)した時の背景色を変える
WEBサイトのテキスト部分の可視性をアップしてくれるCSSテクニックをご紹介します。
まだ使えるブラウザは限られていますが、とても簡単に実装できるのでおすすめです。
対応ブラウザ(2012/1時点)
- Chrome16
- Safari
- Firefox
- IE9
主要なブラウザは対応しているのでひとまず安心して使えそうです♪
このサイトでも利用しています。
使い方
CSS
/* = Selected Text ----------------------------------------------- */ ::selection { background:#d4dcd6; /* Safari */ } ::-moz-selection { background:#d4dcd6; /* Firefox */ }
このコードをCSSファイルのわかりやすい箇所にコピペしてお使い頂ければ完成!
カラーはお好みのものに差し替えるだけです。
とっても簡単なのに、文字の可視性がグンとアップします!
ぜひ使ってみて下さいね♪
Comments
ごん丸
初コメントです。
こちらの記事を読んで自分のサイトに適応させてみました。
ありがとうございます!
2014年9/2