Javascriptを利用した静的サイト

使用言語など:Adobe XD HTML/CSS Javascript

実装期間: 4日

デザインカンプ(デザインの完成見本図)から、レスポンシブ対応のコーディングを行いました。 デザインカンプはPCデザインのみのため、タブレットやスマートフォン向けのデザインは自身で行っています。

Javascriptを使用し、スマートフォンのメニュー、FAQのアコーディオンメニュー、サイト内リンクのスクロールなどを実装しました。 また、問い合わせフォームは必須項目を入力しないと送信できないよう実装しており、Google Formへ入力情報を送信できるよう機能を具備しました。 そのほか、ResultsのセクションではJavascriptのライブラリSwiper.jsを利用し、ページネーション(スライドが何枚あって、何枚目かを表示するパーツ)のカスタマイズを行っています。

※ 架空サイトのため、Basic認証を設定しています。ID: guest / Password: guest123 を入力してご覧ください。