HPコーディング(HTML/CSS/jQuery)

●制作期間：４時間

●制作内容：codestep様(https://code-step.com/media-menu/)にて配布されている、コーディング練習用のAdobe XDデザインカンプを元に、0からフルスクラッチでコーディングを行いました。レスポンシブにも対応しております。

●使用言語：HTML, CSS, jQuery

●使用ツール：VSCode, Adobe XD

●公開URL：https://rururu.moo.jp/sneakers/

●制作のポイント

①ピクセルパーフェクトでのコーディング

以下に注意し、デザインカンプ及び指示通りの実装を行いました。

・動画の全画面表示、グリッドレイアウトの使用等、指定の仕様に忠実に実装

・XDファイルより余白、フォントサイズ、仕様を抽出し仕様通り実装

・デザインカンプのpng画像とGoogle Chrome拡張機能Perfect Pixelを使用しピクセルパーフェクトになるように最終調整

②jQueryを利用したリッチなアニメーション

以下の三種類のjQueryを利用しアニメーションを実装しました。

・SmoothScrollによる、滑らかなページ内リンクの画面遷移

・slickを利用した「PICKUP」パーツのスライダー表示（レスポンシブにも対応）

・Delightersを利用し、「FEATURE」パーツの画像について下からふわっと表示されるように実装

③グリッドレイアウトを利用したレスポンシブ対応

グリッドレイアウトを利用し、最低限のCSSでレスポンシブ表示に対応いたしました。