【架空の工務店サイト】

制作サイト
サイトURL
works-etelliabuilder.siroto-portfolio.com

コーディング / Figma / HTML / CSS / jQuery

制作期間:2週間

参加しているコミュニティETELLIA ONLINEの課題で制作した架空の工務店サイトです。figmaのオリジナルデザインカンプを元に、HTML CSSコーディングを行いました。
カルーセルスライダーやハンバーガーメニュー、カテゴリの並び替え等をjQuery、JavaScriptで実装しています。また、Googleマップの埋め込みも行っています。
レスポンシブデザインはお任せであった為元のデザインを大幅に崩さない事を心がけながらコーディングを行いました。 ヘッダーはPCデザインのまま左にあるとコンテンツの幅が小さくなってしまう事を考慮し、レスポンシブの際は上に配置して追従させるようにしました。

実装機能のご紹介

  • スライダー

    jQueryプラグイン「slick」で実装しています。画像をクリックすると該当の要素をメインに大きく表示するようになっています。要素間の幅やデザイス毎の折り返しの設定などは新たに指定して、調整を行っています。

  • ページネーション

    jQueryプラグイン「paginathing」で実装しています。デザインはCSSで新たに調整をおこなっています。

  • カテゴリの並び替え

    jQueryで実装しています。該当する要素のみ表示される仕様となっています。

  • お問い合わせのバリデーションチェック

    jQueryで実装しております。必須項目に入力がない場合に、送信ボタンをクリックできない仕様になっています。