コーディング実績3：和風旅館のHP【XDデザインデータからコーディング】

目次

1. サイトURLと認証パスワード

2. 使用しているアニメーション機能の紹介（Javascript / jQuery）

3. コーディングで工夫したポイント（HTML / CSS）

1. サイトURLと認証パスワード

下記URLからご確認いただけます。Basic認証をかけていますので、ユーザーIDとパスワードをご入力くださいませ。

https://arihara-yuki.com/portfolio-3-ryokan.arihara-yuki.com
ユーザーID：arihara-test-review
パスワード：arihara-test-review-pass

2. 使用しているアニメーション機能の紹介（Javascript / jQuery）

• トップ画面の画像がズームアップし、なおかつ画像がふわりと切り替わる（※こちらはCSSだけで実装しています。本作品は３種類の画像が順に切り替わります）。
• jsライブラリのflatpickrにより、お問い合わせフォームにカレンダーを表示。なお、フォームは予約ボタン（下の画像内の右上のボタン）をクリックすると現れるモーダルウィンドウ内に設置した。モーダルウィンドウ表示中は背景がスクロールしないよう固定している。

• ハンバーガーメニューのクリック時、要素が右からスライドイン（アイコンも変化）
• スクロールでヘッダーの背景色とメニューテキストの色が反転する
• スクロールで要素がふわりとスライドアップ
• お知らせセクションの記事はタイトルの下にあるタブによって切り替え可能（CSSだけで実装）。※本作品は静的サイトですが、タブ機能はWordPress案件にも実装可能です。

3. コーディングで工夫したポイント（HTML / CSS）

■トップページ

• 縦書きレイアウトを随所に設置。ベンダープレフィックスを活用することで、ブラウザによって縦書き表示が崩れるのを防止。
• 下記の写真部分はブラウザ画面が伸縮した際もアスペクト比を維持。さらにどんなサイズの写真を挿入してもトリミングされて同じ幅・高さで表示される。※タイトルやテキストに関して長文になる場合は、規定の高さをはみ出た場合は非表示にしています。WordPress案件では文字数制限をかけることも可能です。

• Googleマップの埋め込み
• Perfect Pixelを各ページの作成時に活用し、カンプとのズレを限りなくゼロに

■下層ページ

• ブロークングリッドなどの複雑なデザインにも対応可能

■サイト全体の設定

• サイトタイトルやサイトディスクリプションを設定し、SEO対策
• パンくずの構造化マークアップで、検索結果に表示