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

OVERVIEW

コーディングのスピードアップ、WordPress化前の静的コーディングの練習課題として取り組みました。共通部分をパーツ化すること、公開後に画像やテキストの差し替え、要素の増減が必要になっても、レイアウトが崩れないことを意識して制作しました。

YEAR 2022

URL:https://rea1i2e.net/portfolio/2022-07-12codeups01/
ユーザー名 testuser
パスワード 0324

■学習者向けのデザインカンプを利用しました。架空のデザイン会社コーポレートサイトです。(全8ページ)※フォーム送信機能は未実装。
・デザインカンプ
【上級編】企業サイトのコーディング練習
 https://webdesigner-go.com/coding-practice/advanced/

■制作環境
・コーディングのスキルアップ支援サービスCodeUpsで提供されているVite環境を実験的に使用して制作。開発途中の環境のため、不具合があった場合に開発者にフィードバックしながら進めた。
・gitとGitHubを利用して、履歴を管理。

■特徴
・CSS設計にはBEMを利用して、予測・再利用・保守・拡張のしやすさを意識。
・SASSファイルはブロックごとに分割して、どのブロックがどのファイルでスタイル設定しているか分かりやすくなるようにファイル設計。
・ヘッダーやフッター、ボタン、パンくずリストなどをコンポーネント(テンプレート化したファイル)にまとめ、それぞれのページで呼び出す形で使いまわした。
・WordPress化を前提に、よく使われるWP-PageNaviやContact Form 7の利用を前提に、クラス名などを合わせてコーディングしました。
・品質チェックリスト作成
  https://www.notion.so/90ef9edd7bc94319af4c3851dd3b9fba
・レスポンシブ対応(スマホファースト)
・クロスブラウザ対応(Chrome、Safari、FireFox、Edge)
・複数OS対応(mac OS、Windows)
 ※Windowsは"ConoHa for Windows Server"を利用して表示確認



WEBSITE