ISARA[イサラ]の模写コーディング完成!アコーディオンの実装。

ISARAの模写コーディング完成しました!(pc版)

長かった。

分厚い壁に少しずつ穴を開けるようなイメージでコツコツ積み重ね、ついに終わりました。

かかった期間は約1か月半。

私はたぶん1日平均1時間もできてない。

45日として、時間にすると約40時間くらいでしょうか。

実際にはこれ以外に色々調べたり勉強する時間もありましたが、初心者の方はだいだい30~40時間を目安にすればいいのではないでしょうか。

(たぶん私はかなり遅い方だと思います。)

 

スポンサーリンク

アコーディオンの実装。

よくある質問部分のアコーディオンはプロゲートと同じように作りました↓

f:id:gharuto:20200614231835p:plain
isara.life模写制作LP

 

HTMLはli要素で作り、CSSで答え部分をdisplay:noneで隠し、

jQueryは、クリックイベントの中でif文を作り、

「もし答え部分にopenクラスが付いていたら、openクラスを外して答えをslideUpで隠す。」

「openクラスが付いていなかったら、openクラスを付けて答えをslideDownで表示する。」

という感じです。

また、右側のアイコン(vみたいなやつ)の切り替えは、removeClassとaddClassで、フォントオーサムのクラスを付け替えて行いました。

jQueryは久しぶりだったので色々忘れている…。

removeClassやaddClassには「.(ドット)」がいらないんですね(^^;

アコーディオンの実装は見本サイトとは若干異なりますが、まぁいいでしょう。

 

ページトップの実装。

ページトップに移動するこのアイコン↓

f:id:gharuto:20200614235653p:plain
isara.life模写制作LP

 

これの実装はjQueryで作りました。

プロゲートjQuery上級編で出てきたanimateメソッドとscrollTopメソッド、あの通りです。

 

SNSボタンの作り方。

フッターにあるSNSボタン↓

f:id:gharuto:20200614231818p:plain
isara.life模写制作LP

 

今回は自作ではなく、このように作りました↓

サイトにSNSボタンを設置する方法(ツイッターとフェイスブック)。
今回は、ツイッターとフェイスブックのSNSボタンを設置する方法を書いていきます。 ISARAの模写コーディングを例にやっていきます。 ツイッターの「ツイート」ボタンを設置する方法。 まずTwitter Publishにアク...

 

今後の予定。

次はイサラのレスポンシブデザインを作ろうと思います。

 

テックアカデミー無料体験はこちら↓
TechAcademyの無料体験

コメント

タイトルとURLをコピーしました