デイトラ学習にっき🌷中級編DAY5・6　jQuery実践

学習時間📚2/21(日)4h・2/22日(月)2.5h

割と発狂しそうなレベルで苦戦して行ったjQuery実践です。(爆)
モーダルは理解しきれておらず、もう一度学んだタイミングでしっかり振り返ります。

始めに行うこと

jQueryと作成したjsのファイルを読み込む
HTMLのbodyタグの最後の部分に書く

ドロワーメニューの実装

Suzuki Blog　を参考
①HTMLのドロワーメニューを表示させたい箇所にulを記載
②CSSでdisplay:none に設定
③jQueryでクリックされた時に、slide Toggleを機能させる

ページトップに戻るボタンの実装

AGO HACK　を参考
①HTMLでトップを戻るボタンを記載
（位置はCSSで固定するのでどこに書いてもいい）
②CSSで表示させる位置を固定。display:noneに設定
③jQueryでスクロールしたときにfadeIN,fadeOutする設定
※fadeINの時間設定等詳細についてはこちらを参考

モーダルでの画像の拡大表示

Webクリエイター自省録　を参考
①HTMLのコンテンツ一覧にulとliを追加
※ulでひとまとめに括ったところ、横並びが崩れるため、項目ごとにul追加
②CSSを記載するが、画面中央に画像が揃わず
　中央揃えの方法のみ、WDD　を参考
③jQueryはサイトの方法通りに記載

最初にWDDのサイトの記載方法通りに書いてたんだけど、なぜかどこをクリックしても同じ画像が表示されてしまう問題が発生😢
何をどうしても解決できず別のサイトの方法で書き直しました。
（しかし画像の中央揃えはWDDの方法のほうがうまくいったというw ほんと難しいです。。）

この原因が不明すぎてモヤっている部分はあるので、学習が進んだら再度確認しに戻ろうと思います。
同じ現象に悩んだ人、これが原因では!?ということがあればtwitterでもnoteでもコメント頂ければ嬉しいです！