Javascriptを使わずにCSSだけでできること①

# はじめに
皆さんもフロント開発の際に、JSやCSSはよくお世話になっているかと思います。
最近はTailwind CSSやSCSSなどを頻繁に使うようになり、CSSをがっつり書く機会が減った方もいるのではと思います。
そんな中で最近のCSSの進化もスゴイぞ！ということで実はこの機能、CSSだけで実現できます！を記載していきます。
※初心者や、たまに書き方忘れる私、コーダー向けに書いてます。
※もっといいものあるぞって方はぜひぜひご教授を...

## おなじみホバーエフェクト
これはもう当たり前のレベルで使ってますね！
マウスオーバーした際に、動きを加えたいときに使うものです。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="LEPaJdz" data-pen-title="Untitled" data-user="ipeibcld-the-solid" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ipeibcld-the-solid/pen/LEPaJdz">
  Untitled</a> (<a href="https://codepen.io/ipeibcld-the-solid">@ipeibcld-the-solid</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

## アニメーション
最近、アニメーションがたくさんついたサイトも多いですね！
@keyframesを使えばCSSだけでも多くのアニメーションを実装することは可能です。（私もこの辺りはまだまだ勉強中...）

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="bNbZxBQ" data-pen-title="Untitled" data-user="ipeibcld-the-solid" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ipeibcld-the-solid/pen/bNbZxBQ">
  Untitled</a> (<a href="https://codepen.io/ipeibcld-the-solid">@ipeibcld-the-solid</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

## スクロール
ECサイトとかでよく見かけるスクロールエフェクトですね！
ひと昔前はjqueryやBootStrapで実装してましたが今やCSSだけで実装できるようになりました。
今回は単純に下のボタンでスライドが動くようにしましたが、先ほどの@keyframesと組み合わせることで、自動でスクロールしたりすることも可能になります。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="EaYMerm" data-pen-title="Untitled" data-user="ipeibcld-the-solid" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ipeibcld-the-solid/pen/EaYMerm">
  Untitled</a> (<a href="https://codepen.io/ipeibcld-the-solid">@ipeibcld-the-solid</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

## ハンバーガーメニュー
みんな大好きハンバーガーメニュー。私も多く書きましたが書くたびにコード変わってるので一番シンプルな機能だけを書いたもの残しておきます...
未来の私、これをテンプレにするんだぞ...
単純にハンバーガーを押すとボタンが×に変わりメニューが現れます。よくあるのは、ここにアニメーションを加えたり、メニューの表示をゆっくりにしたり等々、ハンバーガーメニュー１つでも様々なバリエーションがあります。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="zxObmYd" data-pen-title="Untitled" data-user="ipeibcld-the-solid" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ipeibcld-the-solid/pen/zxObmYd">
  Untitled</a> (<a href="https://codepen.io/ipeibcld-the-solid">@ipeibcld-the-solid</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

# おわりに
実は最近、リファレンス本を買ったので、CSSだけでいろんなことできるぞ！って記事を書きたくなり、今回書きました！このほかにもまだまだいろいろできることがありますし、日々CSSだけで多くの機能が実現できるようになってきています。
他の部分に関しては次回、書く（かも）なのでしばしお待ちを...！