選択時(ドラッグ)に背景色とか文字色とか、しゃれおつに変更してみよう

どうも、牛丼デザイナーのぽてこです。

今日もコーディング記事を書いたのですが、
ついに「デザインブログ」のゲシュタルトが崩壊してきました。

どうも、牛丼デザイナーの牛丼ブログです。

WEBサイトを見ていると、文字などを選択したときに出てくる色がとってもカラフルで
…キレイダナーと思っています。（小並感

この選択時の背景色なのですが
意外と簡単なコードで実装できちゃいます。

わかりやすい場所に以下のCSSを付け足すだけで、あら不思議の海のナディア。
ぽてこはいつもCSSの上の方に記述しています。

【CSS】

::selection {
	background: #000; /* Safari用 */
}
::-moz-selection {
	background: #000; /* Firefox用 */
}

ちなみに。
管理人の粋な計らいにより、コピペすると真っ黒になるのでお好きな色に変更してみてくださいね。

しゃれおつソースって言うと、なんか美味しそう……。
ということはさておき。

選択時の背景色を変えるための擬似要素ですが、
背景色を変えるだけじゃないんすよ。実はね。ふふふ。

そう、なんと！文字色の変更もできてしまうのです。
方法は先程と、ほぼ一緒だったりします。

【CSS】

::selection {
	color: #00ffff; /* Safari用の選択時の文字色 */
}
::-moz-selection {
	color: #00ffff; /* Firefox用の選択時の文字色 */
}

こちらも、ぽてこトラップにより懐かしい色合いが再現できます。

擬似要素なので、直前にclass名などを追加することも可能です。

【こうして、こうして、こうじゃ！】

p::selection {
background: #000;
}
p::-moz-selection {
background: #000;
}

この::selectionですが、注意しなければいけないことが2点あります。

まぁ、簡単なことなのでちょっと気をつければOKです。

まぁタイトル通りなのですが、::selectionは、
以下の4つのプロパティにしか適用されません。

ちゃんと適用されないーー！と思っても焦ってはいけませんね。

この::selectionはCSS3の草案に記載されていた擬似要素です。

ですが、入れ子要素での動作の定義がふわふわしていた為に、
勧告候補にあがる前に候補から落とされてしまったようです……。残念。

でも、この擬似要素の機能を実装するブラウザがたくさんあることも事実です。
そんな簡単には無くならないものだと、ぽてこは信じています。よ。

そんな感じなので、便利な擬似要素なのですが、ちょっと不安な部分もあるかなーという感じでしたー。
推薦されていなかったり、ふわふわしてたり、そういったCSSも結構あるので注意していきたいですね。

まぁ、個人的に使うなら全然問題ないんじゃないかなーと思うのです。

「::selection」って、わりとよく使う擬似要素だったのですが、はじめて知ったことも多かったです。
ブログ書いていると勉強になることが多いなぁ……なんて思う今日この頃ですよ。

んで、W3Cってあるじゃないですか。
今まで毛嫌いして読まなかったのですがしっかり読んでみると案外面白いのかもとか思ったり。
（いまだに読んでないっす。これがぽてこクオリティ。案外なんとかなるもんだけど非推奨。）

ちなみに。一瞬だけW3C見てみました。めげました。早いね、ぽてこさん！
そんな今日のぽてこでした。

ちゃんちゃん。

牛丼デザイナーのときめきデザイン