Figmaデザインカンプからのコーディング | 架空のコーポレートサイト

OVERVIEW

デザインカンプからのコーディングを行いました。gulp開発環境を使い、CSS設計を意識して他者でも見やすく、使い回しができ、更新しやすいコードを心がけました。テキストの増減やアスペクト比の違った画像への差し替えにも対応できるコードになっています。※下層ページは一部のみ

YEAR 2021

URL　https://2021-10codeups.rea1i2e.net/

ユーザー名　testuser

パスワード　1026

ソースコード　https://github.com/rea1i2e/2021-11codeups

■CSS設計を学ぶための講座「CodeUps」で提供されているデザインカンプを利用しました。架空のコーポレートサイトです。
・CodeUps　https://hrk315blog.site/code-support-content/
　

■特徴
・gulp開発環境を使った効率的なコーディング
・CSS設計を意識したBEM設計手法でのコーディング
・テキストを増やしたり、アスペクト比の違う画像に差し替えても表示崩れを起こさない
・ほぼすべてのサイズ指定をremで統一
・CSSアニメーションでの画像切替（メインビュー）
・ハンバーガーメニュー（jQueryで実装）
・ドロワーメニュー（jQueryで実装）
・メインビュー以降までスクロールすると色が変わるヘッダー（jQueryで実装）
・３枚の画像が自動で右から左へ流れるスライダー（slickを利用）
・レスポンシブ対応（あらゆる画面幅で表示崩れを起こさない）
・スマホファーストでのコーディング
・クロスブラウザ対応（Chrome、Safari、FireFox、Edge）
・複数OS対応（mac OS、Windows）
　※Windowsは"ConoHa for Windows Server"を利用して表示確認
　※下層ページは一部（お知らせ＋事業内容＋制作実績＋制作実績詳細ページの一部）のみです。
　※徐々に更新しております。