よくある動き、お気に入りの実装方法

コーディングをする上でよく遭遇する動きの実装方法を、随時更新していこうと思います。

###ハンバーガーメニュー
[CSSだけで簡単にドロワーメニュー(ハンバーガーメニュー)を作る](https://qiita.com/super-mana-chan/items/0310e3543bd1c3e4761a)

(PCで閲覧している場合、コードを表示すると画面幅が狭まって、ハンバーガーメニューが表示されるようになります)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="d0ne1s" data-slug-hash="rNOgygw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="rNOgygw">
  <span>See the Pen <a href="https://codepen.io/d0ne1s/pen/rNOgygw">
  rNOgygw</a> by d0ne1s (<a href="https://codepen.io/d0ne1s">@d0ne1s</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## アコーディオンメニュー
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="d0ne1s" data-slug-hash="wvKZEKO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="アコーディオン">
  <span>See the Pen <a href="https://codepen.io/d0ne1s/pen/wvKZEKO">
  アコーディオン</a> by d0ne1s (<a href="https://codepen.io/d0ne1s">@d0ne1s</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="d0ne1s" data-slug-hash="JjYqWgv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="アコーディオン">
  <span>See the Pen <a href="https://codepen.io/d0ne1s/pen/JjYqWgv">
  アコーディオン</a> by d0ne1s (<a href="https://codepen.io/d0ne1s">@d0ne1s</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

###タブ切り替え
方法1: CSSが冗長になるけど、自由度が高そう。こっちの方が好き。
[簡単なタブ切り替え機能の実装 | TIPS | BOEL Inc. ボエル](https://www.boel.co.jp/tips/vol86_tabselect.html)
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="d0ne1s" data-slug-hash="qBOGjob" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSSでタブ2">
  <span>See the Pen <a href="https://codepen.io/d0ne1s/pen/qBOGjob">
  CSSでタブ2</a> by d0ne1s (<a href="https://codepen.io/d0ne1s">@d0ne1s</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

方法2: すっきり書けるけど変更に弱そう。
[CSSだけでタブ切り替えを作る方法](https://bagelee.com/design/css/create_tabs_using_only_css/)
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="d0ne1s" data-slug-hash="ExVzXZq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSSだけでタブを表現">
  <span>See the Pen <a href="https://codepen.io/d0ne1s/pen/ExVzXZq">
  CSSだけでタブを表現</a> by d0ne1s (<a href="https://codepen.io/d0ne1s">@d0ne1s</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

###画像スライダー
Swiperを使って実装。
[【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介](https://haniwaman.com/swiper/)

###画像ポップアップ
これって方法が見つかってません。lightboxが有名だけど、何となくもっさりしていた印象があります。

###モーダル
今まではBootstrapで実装することが多かったけど、自分でjs書いてやった方が良いかもって思ってます。
[プラグイン](https://micromodal.now.sh/)もあるけど、自前で実装できるものは自分で書いた方が結局工数が少なくなる気がする。

###グラフ
Chart.jsを使って実装。
[Chart.jsでグラフを描画してみた](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369)