2014.11.24aタグのマウスオーバー(hover)で、テキストや背景の色を変えたりする時に実装するとオシャレになるオススメテクニックを紹介します。いっても、CSSのaセレクタに1行加えるだけと超簡単。aセレクタにtransitionプロパティを追加。transitionは時間的変化を指定するプロパティで:hoverなど動きがあるスタイルなどに使えます。}1234567891011a.demo01{padding:10px20px;border:1pxsolid#fff;background:#efefef;transition:all0.5sease0s;/*これがぬるっとしてくれる*/}a.demo01:hover{padding:10px20px;border:1pxsolid#efefef;background:#fff;}ぬるっと変わる動作デモ「テスト」にマウスオンするとぬるっとエフェクトします。オシャレなサイトのボタンに良くある感じのアレです。実際に追加したのはtransitionプロパティだけ。DEMOCSSだけで簡単に実装出来て軽量な上、普通のリンクよりちょっとリッチになるのでおすすめ。シンプルで高級感を出したいサイトや、落ち着いたデザインのサイトに使えそうですね。PUNCHWebデザイナーは何でも屋じゃない!Webデザイナー、コーダー、マークアップエンジニア、フロントエンドエンジニアの違いと相関図レスポンシブサイトに使える!画面サイズで読み込むJavascriptを切り替えるjsこの記事のコメントコメントを書き込むコメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Web制作CSSホームWeb制作スポンサーリンクマヒ千葉県南房総の田舎に移住。古民家をDIYでリノベーションしながら、保護猫・保護犬と暮らしています。PUNCH.タイトルとURLをコピーしました。