Photoshopデザインカンプからのコーディング | 架空の建設会社 コーポレートサイト
Photoshopデザインからのコーディング練習のために制作した架空のコーポレートサイトです。FLOCSSを使ってCSS設計にこだわりコーディングしました。後から画像を入れ替えたり、テキストを修正したり、カード枚数を増やしてもレイアウトが崩れないように意識しました。
URL：https://portfolio.rea1i2e.net/2022-03photoshop/
ユーザー名 testuser
パスワード 0324
■学習者向けのデザインカンプを利用しました。架空の建設会社コーポレートサイトのトップページです。（下層ページは作成していません）
・デザインカンプ
【即戦力編】Photoshopデザインカンプからのコーディング練習
https://note.com/samuraibrass/n/n779ccd15e0ae
■特徴
・修正してもレイアウトが崩れにくいコーディング
（縦と横の比率が異なる画像への差し替え、長いテキストまたは短いテキストへの変更、カードの枚数変更などをしてもレイアウトが崩れにく状態になっています）
・ローディングアニメーション
・CSSアニメーションでの画像切替（メインビュー）
・スクロールすると切り替わるヘッダー（jQueryで実装）
・スクロールすると表示されるコンテンツ（aos.jsを利用して実装）
・タブ切り替えの実装（jQueryで実装）
・パンくずの構造化マークアップ
・ピクセルパーフェクト
※一部合理的な理由を添えてデザイン変更あり
・品質チェックリスト作成
https://www.notion.so/0344c3b4a11443da8ac0a37519bf7e66
・レスポンシブ対応（スマホファースト）
・クロスブラウザ対応（Chrome、Safari、FireFox、Edge）
・複数OS対応（mac OS、Windows）
※Windowsは"ConoHa for Windows Server"を利用して表示確認
