Posted on October 21, 2006 at 10:31 pm

::selectionで選択したテキストの見栄えを変える

サイトデザインへのこだわり

先日purprinさんとソーシャルブックマークサービスについてあれこれ(アツく?)語り合ったりしたのですが、purprinさんがデザインされたPOOKMARK Airlinesについてもいろいろお話しました。
その中で個人的なステキポイントの1つ、選択したテキストの背景色がサイトデザインとマッチしてるところにpurprinさんのこだわりを感じました。
faviconを作ったり、ツールチップのデザインを変えてみたり…どうでもいいことにこだわるのはただの自己満足かもしれないし、逆にアクセシビリティの低下をまねいてしまうかもしれません。
そのわかりやすい例がココだったりするんですけども…
こだわりと見やすさのバランスが大切なのかもしれません。

選択したテキストの見栄えを変える

pur*logやPOOKMARK Airlinesでのソースを教えていただいた後に自分でもいろいろ調べてみました。

選択したテキストの見栄えを変えるには「::selection」という疑似要素をCSSで指定するそうです。

::-moz-selection{
background:背景色;
color:文字色;
}

::selection {
background:背景色;
color:文字色;
}

これはCSS3をサポートしたブラウザ以外は無視されます。
Firefoxの場合は::-moz-selectionという独自拡張CSSが使えます。
でもあまり使わない方がいいみたいですが…

  • Mozillaの独自拡張CSSは使わないでください - Web標準普及プロジェクト

    • IE7
    ::selection

    Firefox2.0
    ::selection

    ::selectionは背景色と文字色以外もcursorやoutlineも指定できるみたいです。
    また輪をかけて見にくくなったとツッコミが入りそうですがおもしろそうなので取り入れてみました。

    - 参考 -

    Tags: , ,

    2 Responses to “::selectionで選択したテキストの見栄えを変える”

    1. purprin on October 21st, 2006 at 11:41 PM says:

      わー！乙女ちっくなピンク！！！
      Mozilla 独自拡張ってつかっちゃいけないって書いてあるの分かっていながら、つい試したくなるのです・・

      正式に実装されてほしい（実現したら夢みたいな！？）プロパティがたくさんありますね。

    2. lomo on October 22nd, 2006 at 8:35 AM says:

      ＞purprinさん
      色くらいは乙女チックにしないとね…ってことで :P

      正直CSS3とか関係ないわーとか思ってスルーしてたんですけどもpurprinさんとお話してからモーレツに気になっていろいろ調べちゃいました :-)
      画像を使わなくてもCSSだけでいろんな表現ができそうでワクワクします!
      Mozillaの独自拡張もオマケっぽい使い方ならいいっすよね :P

    Leave a Reply