ProgateでHTMLとCSSを一通り勉強した。

h1やpの意味も分かる。

marginやpaddingも使ったことがある。

それなのに、見本のデザインを目の前にすると、

と、手が止まっていませんか？

Progateと模写は、やっていることが違う

Progateでは、

と、次にやることを教えてくれます。

しかし、模写では誰も順番を教えてくれません。

• この部分は見出しなのか
• どこまでが1つのグループなのか
• 縦並びなのか横並びなのか
• どのHTMLタグを使うのか
• どの要素に余白をつけるのか

これらを自分で判断する必要があります。

最初からコードを書かないでください

模写を始める時、多くの初心者がいきなりコードを書きます。

<div>
  <div>
    <div>
      内容
    </div>
  </div>
</div>

何となくdivを増やしていくと、 後からどの箱が何のためにあるのか分からなくなります。

CSSを書いても、

• 思っていない場所まで横並びになる
• 余白を入れたら全体が崩れる
• どのclassを直せばいいか分からない

という状態になります。

ステップ1：ページを大きな箱に分ける

まずは、見本サイトを上から下まで見てください。

文字サイズや色などの細かい部分は、まだ見なくて大丈夫です。

最初はページを大きく分けます。

1. ヘッダー
2. メインビジュアル
3. サービス紹介
4. お知らせ
5. お問い合わせ
6. フッター

HTMLにすると、次のような骨組みです。

<header>
  ヘッダー
</header>

<main>
  <section>
    メインビジュアル
  </section>

  <section>
    サービス紹介
  </section>

  <section>
    お知らせ
  </section>

  <section>
    お問い合わせ
  </section>
</main>

<footer>
  フッター
</footer>

ステップ2：大きな箱の中を小さく分ける

次に、1つのセクションの中身を確認します。

例えば、サービス紹介に次の要素があるとします。

• 見出し
• 説明文
• 3枚のカード
• 詳しく見るボタン

HTMLでは、次のように分けられます。

<section class="service">
  <div class="container">

    <h2 class="service-title">
      サービス紹介
    </h2>

    <p class="service-text">
      サービスの説明文です。
    </p>

    <div class="service-list">

      <article class="service-card">
        カード1
      </article>

      <article class="service-card">
        カード2
      </article>

      <article class="service-card">
        カード3
      </article>

    </div>

    <a href="#" class="service-button">
      詳しく見る
    </a>

  </div>
</section>

ステップ3：最初はHTMLだけを書く

HTMLを書きながら、同時にCSSまで触らないでください。

見た目が違うと不安になると思います。

しかし最初は、白い画面に文字と画像が並ぶだけで大丈夫です。

HTMLでは、次の5つを確認します。

• 必要な見出しが入っている
• 文章が入っている
• 画像が入っている
• ボタンが入っている
• 並び順が見本と同じ

ステップ4：CSSは大きい部分から整える

HTMLが完成したら、CSSを書き始めます。

CSSは、次の順番で進めてください。

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.service {
  background-color: #f5f5f5;
}

.service-list {
  display: flex;
  gap: 20px;
}

.service {
  padding: 80px 0;
}

.service-title {
  margin-bottom: 30px;
}

ステップ5：最初はカード1枚だけ作る

超初心者が、いきなり長いページ全部を模写するのは大変です。

まずはカード1枚だけを作ってください。

HTMLはこちらです。

<article class="card">
  <img
    src="image.jpg"
    alt="サービスの画像"
  >

  <h3>サービス名</h3>

  <p>
    サービスについての説明文です。
  </p>

  <a href="#">詳しく見る</a>
</article>

CSSはこちらです。

.card {
  padding: 24px;
  border-radius: 12px;
  background-color: #ffffff;
}

.card img {
  width: 100%;
  height: auto;
}

.card h3 {
  margin-top: 20px;
  font-size: 20px;
}

.card a {
  display: inline-block;
  margin-top: 16px;
}

まずはカード1枚を完成させる。

できたら3枚に増やす。

最後にdisplay: flex;で横並びにします。

分からない時は、問題を小さくする

「このサイトをどう作ればいいか分からない」

という状態では、検索する言葉も分かりません。

そこで、問題を小さく分けます。

例えばカード3枚を横並びにしたいなら、

と検索できます。

ほかにも、

のように、問題を検索できる大きさまで小さくしてください。

最初から完璧に合わせなくていい

初めての模写で、1ピクセル単位まで完全一致させる必要はありません。

• フォントが少し違う
• 余白が数ピクセル違う
• 画像の位置が少しズレている

最初は、それでも大丈夫です。

優先するべきことは、次の4つです。

1. HTMLの構造を考える
2. 縦並び・横並びを作る
3. 余白を調整する
4. スマホで崩れないようにする

今日の30分模写チャレンジ

今日は、長いサイトを全部作らなくて大丈夫です。

見本サイトから、カードやサービス紹介など、 小さなセクションを1つ選んでください。

Progateの次は、新しい教材より模写

Progateが終わると、

と迷うと思います。

しかし、HTML・CSSを使って自分で1ページを組めないなら、 まずは模写です。

新しい知識を増やす前に、 Progateで覚えた知識を実際に使ってください。