架空土木業会社のサイト【Photoshopデザインからのコーディング】

サイトURL：https://daikilog-p.com/portfolio/sonozaki-gumi/

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

◯はじめに

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

◯使用ソフト

・Photoshop
・Visual Studio Code
・FileZilla

◯特徴

・ハンバーガーボタンはEnterキーでも操作可能
（マウスが使えない人/キーボードだけで操作する人もいることを想定）

・ファーストビューの画像3枚はゆっくり切り替わる（swiperを使用）

・ヘッダーはファーストビューを超えると、画面上部に固定される
（上からゆっくりスライドして降りてくるアニメーション付き）

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

◯意識した点

・Safari/Chrome/Firefox/Edgeの4つのブラウザでデザイン崩れがないか確認
→iphone実機でも確認済み

・大画面サイズ（2000px以上）で要素が左に寄りすぎないように調整

・CSS設計（FLOCSS）を用いて、セマンティックコーディングを意識