ISARAの模写コーディング完成しました！（pc版）
長かった。
分厚い壁に少しずつ穴を開けるようなイメージでコツコツ積み重ね、ついに終わりました。
かかった期間は約1か月半。
私はたぶん1日平均1時間もできてない。
45日として、時間にすると約40時間くらいでしょうか。
実際にはこれ以外に色々調べたり勉強する時間もありましたが、初心者の方はだいだい30～40時間を目安にすればいいのではないでしょうか。
（たぶん私はかなり遅い方だと思います。）
アコーディオンの実装。
よくある質問部分のアコーディオンはプロゲートと同じように作りました↓
HTMLはli要素で作り、CSSで答え部分をdisplay:noneで隠し、
jQueryは、クリックイベントの中でif文を作り、
「もし答え部分にopenクラスが付いていたら、openクラスを外して答えをslideUpで隠す。」
「openクラスが付いていなかったら、openクラスを付けて答えをslideDownで表示する。」
という感じです。
また、右側のアイコン（vみたいなやつ）の切り替えは、removeClassとaddClassで、フォントオーサムのクラスを付け替えて行いました。
jQueryは久しぶりだったので色々忘れている…。
removeClassやaddClassには「.（ドット）」がいらないんですね(^^;
アコーディオンの実装は見本サイトとは若干異なりますが、まぁいいでしょう。
ページトップの実装。
ページトップに移動するこのアイコン↓
これの実装はjQueryで作りました。
プロゲートjQuery上級編で出てきたanimateメソッドとscrollTopメソッド、あの通りです。
SNSボタンの作り方。
フッターにあるSNSボタン↓
今回は自作ではなく、このように作りました↓
今後の予定。
次はイサラのレスポンシブデザインを作ろうと思います。
テックアカデミーが初心者向け副業コースを始めました↓
コメント