メニューバーのボタンにカーソルをのせたときなどに、なにかしらの変化があると、ユーザーにとっても使いやすくなります。red;}こちらは最も基本的な、マウスオーバー時の背景色を変える記述ですが、このままだと単純な変化しかつけることができません。今回はCSSだけで簡単に実装できる、より動きのあるエフェクトをご紹介します。red;}「transition」をつけることで単調な変化にならず、徐々に色が変化して柔らかい雰囲気を出すことができます。記述する際に、a:hover要素の方に記述してしまうと、カーソルを要素から離して変化が戻るときの「transition」の効果が適用されなくなってしまうので注意してください。「all」はすべてのプロパティの変化に適用するということです。「all」を変化させたいプロパティの名前に変更することで、そのプロパティにだけ「transition」を適用させることも可能です。背景色はデフォルトの速さで変化させたいが、文字色だけ徐々に変化させたいときは「all」の代わりに「color」(文字色を指定するプロパティ)と記述します。「1.5s」は変化する秒数を表します。数値を変えることで、変化のスピードも変わります。使う色を工夫することで、さらに様々なタイプの変化をつけることができます。0.5;}「opacity」は、要素の透明度を指定する際に使用します。hover時の「opacity」の値を1以下にすることで、要素が光るように見せることができます。scale(1.3,1.3);}「scale(1)」が基準です。hover時の「scale()」内に拡大したい倍率を指定することで、要素が拡大します。scale()の数字を1より小さくすることで、逆に要素を小さくすることもできます。「scaleX()」で横方向のみ、「scaleY()」で縦方向のみを指定します。縦横の倍率が同じ場合は、片方省略して記述することも可能です。translate(5px,5px);}「translate()」の中に移動させたい距離をピクセルで記述します。上記の記述だと、要素が右下に移動して、ボタンを押しているように見せることができます。左上に移動させたいときなどは、マイナスの値で指定をしましょう。「translate」もXとYで縦方向、横方向のみの指定をすることが可能です。まとめこのように、CSSに「transition」や「transform」プロパティを使用することで、サイトデザインの幅が広がり、遊び心を取り入れることができます。上記のサンプルコードをコピペして数値を変えるだけでも全く違う雰囲気になるので、自分のサイトのテーマに合った動きを探してみてください。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。