完成図（カードグリッドの完成イメージ）→身につくスキル：カードグリッドの構造設計／余白調整／レスポンシブ対応 → 所要時間：30〜45分
HTML/CSSでカードグリッドを模写する練習
この課題では、カードグリッドをHTMLとCSSだけで作ります。完成後は、実務で使えるレイアウトがあなたの手元に残ります。
要件定義と素材の準備
- レイアウト：カードグリッド
- 画面幅：PC 960px／SP 768px以下
- 成果物：HTMLとCSSのソースコード
素材はダミーでOKです。まず完成させましょう。
レイアウトの作り方（手順）
Step1：HTMLの骨組みを作る
まずは構造を固めます。外枠→要素→中身の順で組み立てるのがポイントです。
<section class="grid">
<article class="card">カードA</article>
<article class="card">カードB</article>
<article class="card">カードC</article>
</section>ここで重要なのが、役割ごとにクラスを分けることです。後で調整が効きやすくなります。
Step2：レイアウトを組む
次に、配置を作ります。余白はここで整えましょう。
.grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.card { background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08); text-align: center; }Step3：見た目を整える
影と角丸で整えます。
.grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.card { background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08); text-align: center; }Step4：レスポンシブ対応
最後に、768px以下で縦並びに切り替えます。
@media (max-width: 768px) {
/* ここで縦並びに切り替える */
}よくある間違いと講師のアドバイス
- 余白が狭い → gapを確保しましょう
- 崩れる → グリッド/フレックスの列数を見直しましょう
- SPで詰まる → 768px以下で1列に切り替えましょう
次のレベルに進む
次は要件を少し変えて、実務寄りの改変に挑戦しましょう。
