Queriesに仕込むスタイルシートのテクニックを紹介します。:hover[ad#ad-2]下記は各ポイントを意訳したものです。-「:hover」の例CSS3アニメーションのトリガーとしては、「:hover」を利用するものをよく見かけると思います。下記はホバー時にリンクのカラーを変えるエフェクトです。white;}しかし、CSS3アニメーションはホバーに限定されるものではありません。ここでは他のトリガーにCSS3アニメーションを設定する例をいくつか見てみましょう。「:active」でCSS3アニメーション「:active」は要素がアクティブになっている時、つまりマウスダウンやマウスクリックがトリガーになります。ボックスがアクティブになると、その幅と高さがCSS3アニメーションで大きくなります。500px;}「:focus」でCSS3アニメーション「:focus」はマウスやキーボードでその要素をフォーカスした時です。フォーカスが与えられたフィールドの幅はCSS3アニメーションで大きくなります。340px;}「:checked」でCSS3アニメーション「:checked」はチェックボックスがチェックされた時です。チェックされた要素は幅をCSS3アニメーションで変更します。30px;}「:disabled」でCSS3アニメーション「:disabled」はフォームの入力が無効な時です。下記は、一番下のラジオボタンをチェックすると、背景色がCSS3アニメーションで変更します。#666666;}JavaScriptラジオボタンのチェックで「disabled」を変更するのは、「jQuery」を使用します。Queriesは、ユーザーの閲覧環境によって最適なスタイルシートを提供するテクニックです。ブラウザのサイズを変更(961pxより小さく)すると、CSS3アニメーションでボックスのサイズを小さくします。Chromeなどのモダンブラウザです。IE10ではまだCSS3アニメーションがサポートされていませんが、スタイルシートには「-ms-」のベンダープレフィックスを含めました。IE10ではきっとサポートしてくれるでしょう。