2017-08-23

tobijibu

文字選択時の背景色を調整してイラストを作る2

前回、文字選択した時の背景色を使ってイラストを作成しました。

選択時の背景色を出来る限り薄くして、色の強弱を付けるために、沢山の要素を重ねるという手法を使いました。 しかし、無駄なことをしていることに気づいてしまいました。

::selectionはCSSの疑似要素です。 疑似要素は他に::brefore::after等がよく使われますね。 また、特定の要素に対して指定することもできます。 span::selectionといった指定ができるわけです。 さらにスタイルはbackgroundだけではなく、colorも適用できます。 つまり、もっと細かく色を指定できますし、カラーイラストも作ることが出来ます。

あまりにも当たり前のことで、気付かず勘違いしていた自分が恥ずかしいです。


ということで、色々挑戦してみようと思い、ギャラリーサイトを作りました。

[SELECT ALL.]



::selectionはIE、FireFox、Chrome等、一般的なブラウザでは動作しますが、 動作しないブラウザもあるかもしれません。 これは、::selectionは"非標準"の疑似要素であるためです。
現時点(2017年)では標準化され、全ブラウザに搭載される可能性は考えられませんので、 ブラウザの仕様変更によって動作が変わる可能性があることを考慮する必要があります。

参考

developer.mozilla.org - ::selection
https://developer.mozilla.org/ja/docs/Web/CSS/::selection