XDデザインカンプからのコーディング | 架空の温泉旅館 HP

沼尻 よしあき
Web制作コーダー
OVERVIEW

PC用のデザインカンプからコーディングをしました。 スマホ用のレイアウトはPC用デザインを元に自分でレイアウト調整をしました。 ファーストビューの画像はズームアップしながら、3枚の画像が切り替わります。 その他、jQueryなどを使って、動きのあるWebページに仕上がっています。

YEAR 2021

URL：https://rea1i2e.wpx.jp/2021-07ishiikadan/

ユーザー名　testuser

パスワード　1026

■学習者向けのデザインカンプを利用しました。架空の温泉旅館HPです。
・デザインカンプ
　【中級Ex】 XDデザインからのコーディング実践演習【HTML,CSS,JS実案件レベル】
　　　https://note.com/samuraibrass/n/n8dd48cf8d30f
・タブレットやスマホ表示については、PCのデザインカンプをもとに自分でレイアウト調整して実装しました。

■特徴
・複数ページで構成（トップページ＋下層ページ3ページ）
・CSSアニメーションでの画像切替（メインビュー）
・和風レイアウト（縦書きCSS、ブロークングリッドなど）
・ハンバーガーメニュー（jQueryで実装）
・宿泊予約のモーダルの実装（jQueryで実装）
・フォームの送信機能（PHPで作られたメールフォーム機能を実装しました）
　※メールフォーム機能の本体はこちらからダウンロードしました。
・フォームの一部にカレンダー表示（flastpickr.jsを利用して実装）
・スクロールすると切り替わるヘッダー（jQueryで実装）
・スクロールするとふわっと表示されるコンテンツ（aos.jsを利用して実装）
・タブ切り替えの実装（jQueryで実装）
・パンくずの構造化マークアップ
・ピクセルパーフェクト
　※一部合理的な理由を添えてデザイン変更あり
・レスポンシブ対応
・クロスブラウザ対応（Chrome、Safari、FireFox、Edge）
・複数OS対応（mac OS、Windows）
　※Windowsは"ConoHa for Windows Server"を利用して表示確認
・Android端末用に、Googleフォントの実装



WEBSITE