Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

【30DAYSトライアル 2nd】アニメーション編②のまとめ&感想(DAY22からDAY26)

スポンサーリンク

JavaScript

30DAYSトライアル 2nd DAY22からDAY26では最終課題にむけて習得必須なjQueryの実装を習得していきます。

 

 

Day22: ドロワーメニューを実装

<課題>

 

<感想>

課題で紹介されているはにわまんさんの記事を元にドロワーを実装して、PCサイズでは非表示、タブレットスマホで表示させるようにしました。

 

haniwaman.com

 

Day23: スムーススクロールとトップへ戻るボタンの実装

<課題>

 

<感想>

 トップへ戻るボタンは紹介されているはにわまんさんの記事参考に実装しました。

スクロールの途中で出現するフローティングボタンのJavaScript | HPcode

jQueryの解説まで書いてあるので、jQueryが苦手な私でもうまくできました。

 

スムーススクロールはjQueryではなく、CSSたった一行記述しただけで実現しました↓

html {
scroll-behavior: smooth;
}

(対応ブラウザがまだ限られているのが難点ですが、今のところ良しとしてます)

 

 

Day24: クリックイベントの実装

<課題>

 

<感想>

 jQueryがわからなすぎてどこから手をつけていいかわからなかった課題です。

いろいろググって探していた時に見つけたサイトで余裕がある人向けの課題に役立ちそうな記事を見つけたので、先にタブメニューを作ることにしました。

 

5歳でもわかる、タブメニューの作り方(jQuery編) - Qiita

 

記事の通りにタブ作りを進めていくと jQueryのクリックイベントの意味が少しわかるようになったので無事に本課題も終わらすことができました。

 

今回の私のように、本課題でどこから手をつければいいかわからない時は、余裕がある人向けの課題をやってみるとヒントがあるかもしれません。

 

Day25: アコーディオンの実装

<課題> 

 

<感想>

ProgateのjQueryコースでも練習した「アコーディオン」ですが、さっぱりわかってなかったのでググって見つけたサイトの記事を参考に作成しました。

 

課題には立て並びのアコーディオンなのでひとつ開かれたら、他の開いているのは閉まるように実装してみました。

 

lab.sonicmoov.com

 

Day26: モーダルの実装

<課題>

 

<感想>

いきなり課題にモーダルを実装せずに、まずCodePenでモーダル部分だけ作ってモーダルの構造を理解したのちに課題に実装しました。

 

CodePenで作ったモーダル部分↓

See the Pen Day 26 Modal (30days trial 2nd ) by Yaponka (@Yaponka) on CodePen.

 

 モーダルを作るときに参考にしたサイトはこちら↓

webdesignday.jp

 

最後に

 jQueryに苦手意識があるためDAY22からDAY26はつらい課題ばっかりでした。

でも諦めずにグーグル先生に助けてもらいながら課題をこなすことで、何がわからないのかは分かるようになってきました。

 

 

30DAYSトライアル 2ndも残りは「最終課題」のみ!!

最後まで頑張りましょう〜!

 

*30DAYSトライアル2ndの他の課題と感想のまとめも気になる方はこちらの記事をどうぞ↓

treatmyself.hatenablog.jp

 

treatmyself.hatenablog.jp

 

treatmyself.hatenablog.jp

 

treatmyself.hatenablog.jp