2014.02.23
css

選択した文字にスタイルを適用する

ユーザーが文字をドラッグして選択した範囲に背景色(ハイライト)を付けたりできるCSSの書き方です。

使うセレクタは::selectionです。「:」は2つです。
css041
CSSソース

.text01::selection {color:#6b8e23;background:#ffb6c1;}
.text01::-moz-selection {color:#6b8e23;background:#ffb6c1;}

firefoxだと::-moz-selectionを付けないと反映されませんので注意!

HTMLソース

<p class="text01">この文章を選択すると背景(ハイライト)はピンクになる。</p>

<p>この文章を選択すると背景は通常通り。</p>

ブラウザ反映例

この文章を選択すると背景(ハイライト)はピンクになる。

この文章を選択すると背景は通常通り。

上記のCSSとHTMLが反映されていますので上のグレーの枠内で文字を選択し、テストしてみてください。

参考サイト: CSS3 ::selection Selector
関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP