デイトラ学習にっき🌷中級編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でもコメント頂ければ嬉しいです!
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?