使用言語など:Adobe XD HTML/CSS Javascript
実装期間: 4日
デザインカンプ(デザインの完成見本図)から、レスポンシブ対応のコーディングを行いました。 デザインカンプはPCデザインのみのため、タブレットやスマートフォン向けのデザインは自身で行っています。
Javascriptを使用し、スマートフォンのメニュー、タブ形式の表示切り替え、ヘッダーメニューのエフェクトなどを実装しました。 また、宿泊予約をクリックすると、モーダル(ブラウザ上に別枠で表示されるウィンドウ)が表示されるようにしています。 Javascriptのライブラリflatpickrで日にちを選択し、Google Formへ入力情報を送信できるよう機能を具備しました。 そのほか、AOS.jsやSwiper.jsなどのJavascriptのライブラリを利用した動きのあるWebサイトになっています。
※ 架空サイトのため、Basic認証を設定しています。ID: guest / Password: guest123 を入力してご覧ください。