selection要素を使って文章にオリジナルティを持たせおう！　「CSSの小技」第１回

さあやってきました、「CSSの小技」のお時間です

みなさん張り切って行きましょう！

ん？そんなコーナー聞いたこと無い？

なかなか、良い質問ですね

今回が初めてなので聞いたこと無くて当然です

むしろ、この記事を今日（５/２９）までに

読んだことのある人がいたら

それは、宇宙人、未来人、超能力者の

いずれかに該当するとしか思えません！

さて、話が岐阜県の某反転地並に逸脱したので本題に戻すと

今回は文章を選択した時の色を変更できる

selection要素について解説します

この要素を用いることでWeb上の文章に

オリジナルティを持たせることが出来ます！

・そもそもselectionとはなにか？

selectionは文字や画像を選択した時の挙動

を指定するための要素です。

口で言うより下の画像を見たほうが早いでしょう。

本来ならば、選択した部分は青色で表示されなければいけませんが

この画像では紫色になっています。

selection要素でこのように色を変更することが出来ます。

・実装方法

CSSに以下のコードを貼り付けます。

::selection {
    background: #693e79;
    color: #ffffff;
    text-shadow: none;
}

::-moz-selection {
    background: #693e79;
    color: #ffffff;
    text-shadow: none;
}

これを実装すると先ほどの画像のように

紫のセレクションを実装できます。

 ・解説

もちろん先述のコードをコピペしただけでも

リノン様の素晴らしさを十分実感できると出来ますが

貴方にはもっと可愛いと思っている嫁が存在するかもしれません

そんな時は、 2,8行目のbackground要素の色を変更してみましょう

例えば、#692e79を#f98fa3に変更するとこんな感じです。

ちなみに#f98fa3は１６進数による色表示です。

わからない方はググってください

なお、GIMPをお使いの方は「html表記」の前に#をつけるだけで

その色を指定することが出来ます。

それでは、今度はbackgroudを#ffffffにしたらどうでしょうか？

おっと、これでは選択した部分がどこなのか全く分かりません！

これは、選択した部分の背景と選択した文字の両方が

似通った色（色で言えば白）になってしまうために起こる現象です。

これではとても読めませんのでcolorの3,9行目を#692e79に変更してみましょう。そうすれば読めるようになります！

（それでも白のセレクションは見難いので採用しないほうが良いでしょう。。）

このようにselection要素を使う際には

ページの背景、選択した部分の背景、選択した文字

の３つにそれぞれ気を使う必要があります

以上のことを気をつけた上でselection要素を活用してやってください

それではごきげんよう(´・ω・｀)ﾉｼ

※-moz-selectionはfirefox向けの指定です
firefoxはselectionのみではと有効になりません
両方指定するのは面倒ですが
そういう仕様ですので指定しておきましょう。
また、-moz-selectionに別の色を指定しfirefoxと
それ以外で色を変えるということも出来なくはないですが
基本的にそのような利用は混乱を招くだけなのでやめましょう。

【PR】

★月額110円〜/WordPress簡単インストール！　ロリポップレンタルサーバー ★