Garden仕事や趣味でHPやツールを作った際に詰まった問題の解決策など、なんとなく読んでおけば、将来に役立ちそうな情報を載せてます。基礎知識がない方でも直ぐにローカル環境で試せるように各デモのソース一式は全てダウンロード出来る様にしていますので気軽にご利用いただけます。>全デモのソース一式がダウンロード可能です。ソース一式はローカル環境ですぐに使える構成になっています。animateを使用せずに、CSSでスムーズな演出を実現する方法を記載します。ここでは、hover時(要素の上にマウスポインタを重ねたとき)に演出を行う方法を記載します。hover時に適用されるスタイルhover時(要素の上にマウスポインタを重ねたとき)に、その要素に適用されるスタイルはCSSで次のように設定できます。つける事で、hover時に追加適用するスタイルを設定できます。同様の設定が2つあるのは、複数ブラウザ対応のためです。一方の設定は各ブラウザで無視されます。まとめ上記ポイントをまとめると、下記のようなコードになります。class="hover02">Hoverすると、背景色がゆっくり変化します。animateを使用せずに、CSSでスムーズな演出を実現する方法を記載します。ここでは、hover時以外に演出を行う方法を記載します。追加・削除することによりスタイルを変化させます。クラスの追加は次のようなコードになります。クラスを追加しています。クラスの削除は次のようなコードになります。クラスを削除しています。クラスの追加・削除によりスタイルを変化させる場合、次のようにスタイルを設定します。同様の設定が2つあるのは、複数ブラウザ対応のためです。一方の設定は各ブラウザで無視されます。まとめ上記ポイントをまとめると、下記のようなコードになります。ready">ボタンクリックで背景が変化します。hover(要素上にマウスポインタを重ねたとき)した時、その要素が押せる事(ボタンである事)を示すため、要素を半透過させます。次のようなクラスを設定します。0.6;}マウスポインタの形を変える設定を追加して、次のようにしても良いかもしれません。等を利用する場合は、マウスポインタが自動で変化しないため。まとめ上記ポイントをまとめると、下記のようなコードになります。