RaiseTech公式サイト模写

模写完成までの流れ

余白、長さの寸法確認

ディベロッパーツールやGoogle拡張機能の「Page Ruler Redux」を使用して要素などの余白や長さの寸法を測定してコーディングを行いました。

Sassを使用したコーディング

Sassを取り入れたことにより作業効率がアップしました。

レスポンシブ対応

PCファーストでレスポンシブの対応を行いました。

アコーディオンメニューの実装

jQueryを使用してアコーディオンメニューの実装を行いました。

ハンバーガーボタン、ハンバーガーメニューの実装

jQueryを使用してハンバーガーボタンやハンバーガーメニューの実装を行いました。

感 想

RaiseTech第2回目の課題でもある公式サイト模写ですが、とても難易度の高いサイトでした。
背景画像を3つ重ね合わせて1番最背面の背景画像だけはスクロールしても位置を固定するといったCSSのコーディングで躓き、時間がかかってしまいました。
この課題で初めてjQueryを使用してコーディングを行いましたが、かなり理解するまでに時間がかかりましたが、自力で問題を解決し、そのおかげでjQueryの知識が身に付きました。

Webサイトはこちら

ソースコードはこちら