架空の温泉旅館サイト | 静的コーディング（4ページ）
架空サイトの為BASIC認証をかけています。お手数ですが下記ログインID・パスワードを入力しご確認くださいませ。
ログインID
bentest
パスワード
@test1009
デザインカンプからのコーディング課題として架空の温泉旅館サイトを作成いたしました。
◆クライアント
なし
◆サイト概要
URL：https://ben-growth.conohawing.com/Ishikadan/
ページ数：TOPページ＋下層ページ3ページ
制作期間(目安)：2週間
◆構成について
✦TOP
・ご挨拶
・サービス概要
・宿泊プラン概要
・お知らせ
・アクセス
→ヘッダー右部の「宿泊予約」ボタンから予約フォームが出現するよう実装。日時選択欄のカレンダーはJavaScriptライブラリの「flatpickr」を用いて実装しました。その際お客様が直感的に操作できるよう「現在日より前の日は選択できない」、「複数日時選択できる」設定で実装いたしました。
→FVはCSSアニメーションで画像の無限ループを実装。
✦お部屋
・お部屋の紹介
✦温泉
・温泉の紹介
◆その他
・各ページにふわっと表示するスクロール連動型アニメーションをJavaScriptライブラリ「AOS.js」で実装。
・SEO対策の一環としてJSON-LDで構造化した「パンくずリスト」ナビゲーションを設置。検索エンジン最適化やユーザーエクスペリエンスの向上などが期待できます。