【CSS】文字選択(ドラッグ)時に”文字色”や”背景色”をつける方法

【CSS】文字選択(ドラッグ)時に"文字色"や"背景色"をつける方法
スポンサーリンク

理想のバッグを常に求めている謎の旅人(笑)四条せつなです。

Webサイトを見てみると、文字を選択(ドラッグ)したときに”色”がつくことありますよね?あれ、凄く可愛いし、出来れば自分のサイトにも実装したいと思っている人も少なくないハズです。

四条ねこ
ちょっとしたことだけど、他のサイトと差別化出来るし、私もやってみたーい!実はこの文字選択時の色の変更は、めっちゃ簡単に出来るんだよっ!

もっと多くの人に楽しんでもらいたい!ってことで、CSSをコピペするだけで実装出来るように、この記事ではしました!ちょっと解説も入れているので、ぜひ見ていってくださいね。

文字選択時に”文字色”や”背景色”を付けるのは簡単!

文字選択時に"文字色"や"背景色"を付けるのは簡単!

コレをしたいっ!

実は文字選択時に色を付けるのは、めっちゃ簡単なんです。「::selection」という擬似要素を使用すれば、さくっとOKなんです!これなら、誰でも簡単に実装出来ると思います。

四条ねこ
ぁ、そうそう!「Firefox」だとベンダープレフィックス付きの疑似要素、「::-moz-selection」を指定しないと色が適用されないので注意してくださいねっ!!また、IE8以下は未対応なんで、指定してもデフォルトの色になっちゃうよ!

コピペでOK!「::selection」要素で色を付けよう!

上のコードをCSSに貼り付ければ、ページ全体で反映されます。

四条ねこ
CSSに記載するときは、上の方にしておけば後で確認しやすいよっ!全要素に反映するものは、出来る限り上に記載するのがコツ!

また、このように「::selection」の前にクラス名を指定してあげれば、その要素だけ反映させることも可能ですよ!(.fooの部分は、自分の適用したいクラス名にしてくださいね。)

四条ねこ
これなら、要素毎に色を変えたり、ブログの本文だけ色を変えることも出来るね!

せつなのまとめ

文字を選択(ドラッグ)したときに色を変更するには、「::selection」を使えば簡単に変えられるんです。擬似要素というのは、::afterとかと同じ仲間ですね。この疑似要素については別の記事で解説するとしますね。とにかく、色を変えるのは簡単なので、覚えておくと便利ですね。そのときは、「Firefox」の対応も忘れずに!

四条ねこ

つまりは…

  • 「::selection」で簡単に選択時の文字変更ができる!
  • 実装の際は「Firefox」への対応も忘れずに!

って、ことだねっ!

ということで、“【CSS】文字選択(ドラッグ)時に”文字色”や”背景色”をつける方法”でした!でわでわっ!

スポンサーリンク
【CSS】文字選択(ドラッグ)時に"文字色"や"背景色"をつける方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です