疑似クラスの:hoverや:active、:checkedを使ってサイトに簡単な動きがあるアニメーションのような装飾をしていく手順を見ていきます。使いこなすにはセレクタなどもしっかりと理解しておきましょう。 疑似要素の:hoverを使うと、ホバー時のスタイルが適応できて、:activeを使うとクリック時のスタイルの適応ができます。 それぞれの疑似要素の区別を整理すると、下記のようになります。:hover = 要素にマウスカーソルが乗っているときのスタイル 前回の記事で、「スマホで :hover 時のアニメーションを有効にする」方法について触れた。 neos21.hatenablog.com タップしている間だけ :hover を機能させるにはどうしたらいいか調べたところ、 と書けば実現できるようだ。 参考：タッチデバイスでCS… :hoverと:activeでの挙動の違い. hover , active , focus の使い方. サンプルを作ったので、見ながら少しコードをいじってもらったらすぐどこがどういうプログラムになっているのかわかるかと思います！