はじめに
皆さんもフロント開発の際に、JSやCSSはよくお世話になっているかと思います。
最近はTailwindow CSSやSCSSなどを頻繁に使うようになり、CSSをがっつり書く機会が減った方もいるのではと思います。
そんな中で最近のCSSの進化もスゴイぞ！ということで実はこの機能、CSSだけで実現できます！を記載していきます。
※初心者や、たまに書き方忘れる私、コーダー向けに書いてます。
※もっといいものあるぞって方はぜひぜひご教授を...
おなじみホバーエフェクト
これはもう当たり前のレベルで使ってますね！
マウスオーバーした際に、動きを加えたいときに使うものです。
See the Pen Untitled (@ipeibcld-the-solid) on CodePen.
アニメーション
最近、アニメーションがたくさんついたサイトも多いですね！
@keyframesを使えばCSSだけでも多くのアニメーションを実装することは可能です。（私もこの辺りはまだまだ勉強中...）
See the Pen Untitled (@ipeibcld-the-solid) on CodePen.
スクロール
ECサイトとかでよく見かけるスクロールエフェクトですね！
ひと昔前はjqueryやBootStrapで実装してましたが今やCSSだけで実装できるようになりました。
今回は単純に下のボタンでスライドが動くようにしましたが、先ほどの@keyframesと組み合わせることで、自動でスクロールしたりすることも可能になります。
See the Pen Untitled (@ipeibcld-the-solid) on CodePen.
ハンバーガーメニュー
みんな大好きハンバーガーメニュー。私も多く書きましたが書くたびにコード変わってるので一番シンプルな機能だけを書いたもの残しておきます...
未来の私、これをテンプレにするんだぞ...
単純にハンバーガーを押すとボタンが×に変わりメニューが現れます。よくあるのは、ここにアニメーションを加えたり、メニューの表示をゆっくりにしたり等々、ハンバーガーメニュー１つでも様々なバリエーションがあります。
See the Pen Untitled (@ipeibcld-the-solid) on CodePen.
おわりに
実は最近、リファレンス本を買ったので、CSSだけでいろんなことできるぞ！って記事を書きたくなり、今回書きました！このほかにもまだまだいろいろできることがありますし、日々CSSだけで多くの機能が実現できるようになってきています。
他の部分に関しては次回、書く（かも）なのでしばしお待ちを...！