プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
CSS、Webサイト上の文字列を選択したときの文字色と背景色を変更する
結論から書くと

::selection {
    background: #000;
    color: #fff;
}
::-moz-selection {
    background: #000;
    color: #fff;
}

のようなCSSを設定すれば、文字列を選択したときの文字色と背景色を変えられます。

ただし、IE8以前では機能しなかったり、CSS3から外されちゃってたり、
問題もあるっちゃーあります。
「動いたらラッキー、動かなくてもドンマイ」で済ませられる状況であれば良いですが、
動作保証の必要なお仕事とかで使うのは控えた方が無難かもしれません。

それでは、詳細を書いていきます。

Webサイト上で文字列を選択したときの色って、
基本的に文字色が白で背景色が水色っぽい青になるじゃないですか。
これをサイトのイメージ色に合った色に変更したかったのです。

JavaScriptは使いたくないんだけど、CSSで何とかならんかね(--?

Google先生に訊いたところ「何とかなるよ!」とのお返事をいただけました。
ありがたや~(-人-)

というわけで、こんな記述をCSSに追加したところ、
無事に選択文字列の文字色と背景色が変わりましたφ(--)

::selection {
    background: #dfdfdf;
    color: #006;
}
::-moz-selection {
    background: #dfdfdf;
    color: #006;
}

「::selection」と「::-moz-selection」は両方書いてあげてください。
「-moz」が付いている方は、もじらーさん、つまりFirefox用の指定です。
Firefoxさんは「::-moz-selection」の指定に従い、
それ以外のブラウザは「::selection」の指定に従います。

それではサンプル……という程たいしたものでもないので、
宣伝を兼ねて、設定したWebサイトのURLを貼りつけておきますねφ(--)

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

リンク先は、IT用語を初心者や専門外の方に向けて噛み砕いた表現で解説したサイトです。
内容が正確かどうかは微妙ですが、何となくの雰囲気を掴むのには最適です。
気が向いた方は、是非、覗いてやってくださいませ。(自画自賛と宣伝)

おっと、宣伝に熱が入り過ぎました。
話を戻します。

「::selection」の使用にはいくつか注意事項があります。
以下にズラズラ書いておきますので、ご一読ください。
個人的には、選択文字列の色変更は「上手く動いていたらラッキー」程度で
上手く動いてくれなくても大した影響は無いと思っています。
そのため、あまり気にしてはいないのですが、
「一度実装したら、クロスブラウザで動き続けてくれないと困る!」な人は
使用を見合わせた方が無難かもしれません。

それでは注意事項ですが、まずIE8以前では効果がありませんでした。
「::selection」はCSS3で追加された要素なので、
そもそもCSS3に対応していないブラウザでは駄目なようです。
また、IE9では動作確認をしましたが、IE10以降では(面倒くさかったので)確認していません。
多分動くと思いますが、必要な人は頑張って動作確認をしてください。

次に「::selection」はCSS3で追加された要素ですが、
諸々の事情により外されてしまいました。
「CSS3で『::selection』ってのを追加したから」
「あっ、やっぱ、それ無しで。CSS3から外したわ」です。
今現在のブラウザでは動作するようですが、
将来的にはどうなるか分かりません。
例えばお仕事とかで使って、後からお客さまに
「ねーねー。なんか表示変わってるんだけど?」と言われて困る人は
最初から使わない方が無難でしょう。

最後に、色変更以外はできないっぽいです。
太字にしたくて

::selection {
    background: #dfdfdf;
    color: #006;
    font-weight: bold;
}
::-moz-selection {
    background: #dfdfdf;
    color: #006;
    font-weight: bold;
}

とかやってみたのですが、効果はありませんでした。

う~ん、微妙といえば微妙かなぁ(--ゞ

趣味や自己責任で運営しているサイトであれば実装しても良いと思います。
お仕事で作るサイトであれば、私は使うのを躊躇します。
使うとしても、お客さまには事前に「将来的な動作は保証できないよ」と
説明してからでしょうね。

そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト