模写コーディングの手順

準備を整えましょう

準備の方法は準備編をご覧ください。

デザインを観察し、構造を理解しましょう

模写をはじめる前に、どんなレイアウトやデザインになっているのか観察しましょう。

観察ポイント

  • 全体のレイアウト
    • ヘッダー、メインコンテンツ、フッターなどの大枠
    • Flexbox や Grid で組むか
  • フォント・色・余白
    • フォントの種類・サイズ・太さ
    • 余白（margin, padding）はどれくらいか
    • 使われているカラー（カラーピッカーやデベロッパーツールで確認）
  • レスポンシブ対応
    • スマホ・タブレットでの表示の変化
    • メディアクエリの適用ポイント

HTMLの骨組みを作成

サイトの構造に沿って、HTMLを作成します。どこにどのタグを使うかを意識して組んでいきましょう。
この時点では 装飾なしで「意味のある構造」 を意識しましょう。

例（基本的な構造。上記の画像とは関係ありません）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模写コーディング</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>サイトのタイトル</h1>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">サービス</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>メインコンテンツ</h2>
            <p>ここに内容が入ります。</p>
        </section>
    </main>
    <footer>
        <p>© 2025 Sample</p>
    </footer>
</body>
</html>

ポイント

  • header、nav、main、section など 意味のあるタグ を使う
  • div だけで組まず、適切なHTMLタグを使う

CSSでスタイルを当てる

HTMLの骨組みができたら、CSSでスタイリングしましょう。

レイアウトを決める

  • Flexbox や Grid を活用
  • 必要に応じて width、 max-width を調整
  • display: flex;やgapを使って適切な余白を確保
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: white;
}
nav ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

デザインの細かい調整

この段階では、以下をチェックしながら修正します。

  • フォント・カラーの微調整
  • 余白・間隔の調整
  • レスポンシブ対応
    • メディアクエリを使ってスマホ対応
nav ul {
  flex-direction: column;
  gap: 10px;
}
@media screen and (768px <= width) {
  header {
    display: flex;
  }
  nav ul {
    flex-direction: row;
    gap: 10px;
  }
}

動作確認

最後に、サイトがデザインと一致しているかチェックします。

確認方法

  • デベロッパーツールで要素の位置やスタイルを確認
  • レスポンシブモードでスマホ表示をテスト
  • ズレがあれば微調整

模写コーディングを成功させるコツ

  1. いきなりコーディングしない！
    まずはデザインの構造を理解してから手を動かしましょう
  2. 簡単な課題から始める
    最初は初級編から始めましょう
  3. デベロッパーツールを活用する
    レイアウトやフォントサイズを調べながら進めましょう
  4. 100% 完全コピーを目指す
    「大体同じ」「なんとなく同じ」ではなく、できるだけピクセル単位で揃えましょう

まとめ

模写コーディングは、Web制作スキルを上げるのに最適な練習方法です。
何度も繰り返して、スムーズに再現できるようになれば、実務でも役立ちます！

まとめチェックリスト

✅ 模写するデザインを決める
✅ HTMLで骨組みを作成
✅ CSS（Sass）でレイアウトを調整
✅ デザインをピクセル単位で再現
✅ レスポンシブ対応を忘れずに

まずは初級編から挑戦してみましょう！