JavaScript practice

制作期間

2023年2月3日〜2023年2月8日の5日間

制作背景

このサイトは初めてJavaScript使ってスライダーやドロワー、トップに戻るボタンを実装しました。また、ブラウザによって差異が起こりやすいフォームをラジオボタンやチェックボックスを自作することで、どのブラウザから見ても、表示崩れを起こさない方法を学びました。フォームのHTMLとCSSの記述は、少し複雑なもので、labelとの紐付け方などをデイトラさんの講義動画や書籍で見よう見まねで実装しました。

使用したツール

このサイトのデザインは、オンラインスクールのデイトラさんの課題としてAdobeXDのデザインカンプを配布されました。そのカンプに沿ってHTML5とCSS3(scss)を用いてコーディングしました。また、JavaScriptは、jQueryを使用して、コードの簡略化を図りました。またスライダーのライブラリとして有名なwow.jsを使用して、文字やロゴがふわっとフェードインするようにしました。

作り終えての感想

このサイトは、初めてJavaScriptを使ったため、かなり印象に残っています。今まではHTMLとCSSのコーディングであったため、私ができるアニメーションには限りがありました。しかし、ドロワーメニューやトップへ戻るボタンはJavaScriptならではのものであり、更に、ライブラリは便利で、もっと色んなライブラリに触れてみたいと思えたコーディングでした。また、地図の埋め込みもあり、出来ることが増えているのは私自身のモチベーションに繋がりました。

このサイトを見る