HTML/CSSでカードレイアウトを模写する練習｜3枚カードUIを作る

完成図はアイキャッチの通り

身につくスキル：カードレイアウトの基本構造／余白設計／ホバー表現
所要時間：30〜45分

HTML/CSSでカードレイアウトを模写して作る練習
要件定義と素材の準備
カードレイアウトの作り方（手順）
よくある間違いと講師のアドバイス
次のレベルに進む

HTML/CSSでカードレイアウトを模写して作る練習

この課題では、シンプルなカードUIをHTMLとCSSだけで作ります。
完成後は、Webサイトの「記事一覧」や「商品一覧」に使えるカードレイアウトがあなたの手元に残ります。

要件定義と素材の準備

カード数：3枚
画像：任意のフリー画像（横長推奨）
テキスト：タイトル＋説明文＋ボタン
画面幅：PC表示（最大幅960px）を想定

画像がない場合は、CSSの背景色だけでもOKです。まず完成させましょう。

カードレイアウトの作り方（手順）

Step1：HTMLの骨組みを作る

まずは構造を固めます。見出しとカードの枠を作るのがポイントです。

<section class="cards">
  <h2 class="section-title">おすすめ記事</h2>
  <div class="card-list">
    <article class="card">
      <img src="https://images.unsplash.com/" alt="HTML/CSS カードレイアウト 練習" class="card-img">
      <div class="card-body">
        <h3 class="card-title">カードタイトル</h3>
        <p class="card-text">ここに説明文が入ります。2〜3行程度でまとめましょう。</p>
        <a href="#" class="card-btn">詳しく見る</a>
      </div>
    </article>

    <article class="card">
      <img src="https://images.unsplash.com/" alt="Webデザイン カードUI 作り方" class="card-img">
      <div class="card-body">
        <h3 class="card-title">カードタイトル</h3>
        <p class="card-text">ここに説明文が入ります。2〜3行程度でまとめましょう。</p>
        <a href="#" class="card-btn">詳しく見る</a>
      </div>
    </article>

    <article class="card">
      <img src="https://images.unsplash.com/" alt="カードレイアウト HTML CSS 模写" class="card-img">
      <div class="card-body">
        <h3 class="card-title">カードタイトル</h3>
        <p class="card-text">ここに説明文が入ります。2〜3行程度でまとめましょう。</p>
        <a href="#" class="card-btn">詳しく見る</a>
      </div>
    </article>
  </div>
</section>

ここで重要なのが、カード全体を「card」、中身を「card-body」で分けることです。後で余白と影を入れるときに効いてきます。

Step2：カードを横並びにする

次に、display: grid;で3列に並べます。余白はここで整えましょう。

.cards {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 16px;
}

.section-title {
  font-size: 24px;
  margin-bottom: 24px;
}

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

gap: 24px がポイントです。カード同士の間隔が揃うだけで、デザインの「整った感」が出ます。

Step3：カードの見た目を整える

影と角丸を入れて、カードらしい質感を作ります。

.card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-title {
  font-size: 18px;
  margin: 0;
}

.card-text {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.card-btn {
  align-self: flex-start;
  text-decoration: none;
  padding: 8px 12px;
  background: #4a8eff;
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
}

overflow: hidden を入れておくと、画像の角が自然に丸く見えます。ここはプロが必ず入れるポイントです。

Step4：ホバーで少し動きを入れる

最後に、ホバーで浮き上がる感じを出します。完成まであと少しです。

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}