Portfolio

Demo Site

No.001

モックアップ画像

Demo｜Sweets （JavaSccript）

制作時期 2025年 6月～

demo site

program

制作期間
構成・デザイン・コーディング：約 2週間
（ポートフォリオ掲載用 架空サイト）
使用言語
HTML、CSS、JavaScript
使用ツール
Photoshop、Illustrator、VS Code
目的
JavaSccript 練習用サイト
ページ構成

【HTML】

  • トップページ
  • お問い合わせフォーム
  • お申込みフォーム
  • サンプルページ（リンク先用のダミーページ）
制作時のポイント

JavaScriptプラグインの「Swiper」を5カ所使用（FirstView、About、Backed Cake、Cake、Work Shop）
お申込みフォームにJavaScriptプラグインのカレンダー「flatpickr」を使用。
フォームにはバリデーション機能付き

制作内容
  • スライダー
  • モーダルウィンドウ
  • ポップアップウィンドウ
  • タブ切り替え
  • タブ切り替え（絞り込み機能付き）
  • アコーディオン
  • スマホメニューとボタン作成
  • トップボタン
  • ポップアップバナー
  • ページ内リンクナビゲーション
  • レスポンシブデザイン
  • スムーススクロール
  • keyframeアニメーション
  • お問い合わせフォーム（エラーチェック付き）
  • お申込みフォーム（エラーチェック付き）
  • プラグイン「flatpickr」の使用（カレンダー）
  • プラグイン「Swiper」の使用（スライダー）
  • Remix Icon、Google Fonts、Adobe Fontsの使用
  • Google Map埋め込み
  • Web用パーツ作成
  • 使用画像の選定・調整

Program

  • JavaScriptを使用して作成したコード
  • Swiperの読み込みファイルは「swiper-bundle.min.css」「swiper-bundle.min.js」を使用

  • index.html（トップページ）

  • contact.html（お問い合わせフォーム）

  • entry.html（お申込みフォーム）

  • style.css （ 共通 css ）

  • contact.css （ お問い合わせ css ）

  • entry.css （ お申込み css ）

  • common.js（ 共通 js ）

  • main.js（ トップページ js ）

  • contact.js（ お問い合わせ js ）

  • entry.js（ お申込みjs ）

Back
↑