架空旅館サイト【XDデザインからのコーディング】

サイトURL：https://daikilog-p.com/portfolio/ishii-kadan/

ユーザ名 ：daiki_20211023
パスワード：daiki_20211023

◯はじめに

こちらのサイトは実際にプロのエンジニアの方に表示確認をお願いし、デザインが崩れていないかチェックしてもらっています。

◯使用ソフト

・Adobe XD
・Visual Studio Code
・FileZilla

◯特徴

・ファーストビューの画像3枚は、ゆっくりズームしながら切り替わる
（CSSアニメーション使用）

・画面をスクロールすると、ヘッダーの背景色・テキスト色・ロゴの色が変化する

・各要素はふわっと出現（AOS.jsを使用）

・下層ページにはパンくずリストを配置

◯意識した点

・ファイルが混同しないように、フォルダは「public（公開用）」「src（sass記述用）」の2種類に分けた

・モーダル出現時と、スマホドロワー出現時の背景を同じにし、一貫性のあるデザインに

・モーダル・ドロワー出現時に、画面をスクロールできないように配慮

・300px以下のデバイスでもデザインが崩れないコーディングを心がけた（Galaxy foldにも対応）

・白文字が見にくい部分の背景に黒いフィルターを追加

・font-familyの最後にGoogleフォントのNoto Serif JPを追加
（Android端末では明朝体が表示されないため）

・できる限り、セマンティックコーディングを意識

・修正・再利用のしやすさを意識し、scss形式でコーディング

・再利用・拡張・修正・予測のしやすさを意識し、CSS設計（FLOCSS）を用いてコーディング