コーディング全体の流れを“ステップ分解”し、つまずかず自力で進められるようにする。
STEP 0準備
checklistやること
- フォルダ構成を整える（index.html／css/style.cssなど）
- VS CodeやBracketsなどエディタのインストール・基本設定
- 必要な素材（画像・ワイヤーフレーム・テキストなど）を用意
folder_managedフォルダ構成の見本
Coding-Compass/
├─ index.html ← トップページ
├─ step-guide.html ← 8ステップガイド
│
├─ css/
│ └─ style.css ← スタイルシート
├─ images/
│ └─ logo.png など ← 画像素材
├─ js/
│ └─ script.js ← JavaScriptファイル（任意）
└─ assets/
└─ wireframes/ ← ワイヤーフレーム画像など（任意）
gpp_maybe注意点
- パスの通し方（例：
css/style.cssのように相対パスで指定） - ファイル名は英数字・小文字・スペースなしが基本
- ディレクトリ構成を崩さず、拡張子やスペルミスに注意
STEP 1構造を組む（HTML骨組み）
checklistやること
- ワイヤーフレームを見ながら、HTMLで基本構造を作成
- <header> <main> <footer> などのセマンティックタグを使用
gpp_maybe注意点
見た目ではなく“意味構造”を意識すること
STEP 2部品に分ける（構造のパーツ化）
checklistやること
- セクションごとにHTMLを整理（<section>や<div>などで区切る）
- ヘッダー／ヒーロー／サービス紹介／お問い合わせなどの部品化
gpp_maybe意識
「後からCSSで装飾しやすい」構造にする
STEP 3CSSの初期設計（全体レイアウト）
checklistやること
- style.cssを作成し、リセットCSSを導入
- bodyや共通クラスにベースのスタイル（フォント、背景、文字色など）を指定
- display: flex; や margin/padding でレイアウト調整
gpp_maybe注意点
レイアウトが崩れたときは親要素と余白の合計をチェック
STEP 4細かくデザイン（見た目の装飾）
checklistやること
- ボタン、見出し、カード、アイコンなどの装飾
- ホバー演出や配色ルールの調整
gpp_maybe補足
デザインルール（色／余白／文字サイズ）を統一すると見栄えが安定
STEP 5画像・リンクの実装
checklistやること
- imgタグで画像挿入、aタグでリンク設置
- リンクの外部／内部・ファイル構造に応じたパス指定
gpp_maybe注意点
画像サイズ・比率が崩れないようにmax-widthを使う
alt属性の記述を忘れずに
STEP 6レスポンシブ対応
checklistやること
- メディアクエリでスマホ表示の最適化
例：@media (max-width: 768px) { … } - モバイルファースト or PCファーストの方針を決めて記述
gpp_maybeポイント
要素の折り返し／幅の変化／文字サイズ調整など
ハンバーガーメニュー導入（別ページに分けても可）
STEP 7確認・仕上げ
checklistやること
- Chrome DevToolsなどで検証／調整
- 不要なコードやコメントの整理
- altやtitle属性の確認、スペルミスやリンク切れもチェック
gpp_maybeポイント
チェックリスト付きで確認できると◎