XDカンプからのコーディング(html,css,js)

OVERVIEW

架空サイト1ページをXDデザインデータをもとにHTML, Sass, jQueryでコーディングしました。

YEAR 2022

ベーシック認証をかけております。
お手数ですが、以下の情報からアクセスくださいませ。


サイトURL:https://asano-pf-07.xyz/

ユーザーネーム:admin

パスワード:admin^br8Rwa$4Jb#8a0w55$x

制作概要


制作時期:2022年1月

作業内容:静的コーディング

ページ数:1ページ

使用ツール:VScode、Gulp、XD

備考


  • swiper(プラグイン)を使用しスライダー機能を実装。
  • wow.js(プラグイン)を使用しスクロール連動のアニメーションを実装。
  • Googleフォームを埋め込み、メールで受信出来る様にしました。
  • その他、jQueryでハンバーガーメニュー、スムーススクロール、アコーディオン、トップへ戻るボタンを実装。

こだわった点


  • SassでCSS設計を意識しBEMを使って修正・管理し易いコーディング。
  • ボタンのクリック範囲などのユーザビリティ。
  • font-sizeの単位はremで統一し、レスポンシブ対応。
  • お問い合わせフォームでは全項目を入力しないと送信できない設定。


WEBSITE