問題
5HTMLカードレイアウト作成
記事一覧や商品一覧でよく使われる「html カード」レイアウトは、見やすさと情報整理を両立できる重要なUIです。
ただ並べるだけでは崩れやすく、余白や配置の設計に悩むことも多いのではないでしょうか。
この問題では、HTML/CSSでカードを整列させ、複数要素でも崩れないレイアウトの考え方を身につけます。
HTML/CSSの問題に挑戦しよう！
問題
「HTMLカードレイアウト作成」
カードレイアウトを作成しましょう。
タイトル・画像・本文で構成されたカードを横に3つ並べて配置してください。
カード間の余白は左右8px・上下16pxとし、複数（例：8枚）の場合でも左詰で整列するように実装しましょう。
見本と同様のレイアウトになれば成功です。
あらかじめエディタに書くコード
<section>
<ul class="card-wrap">
<li class="card">
<h2 class="card__title">カードのタイトル</h2>
<div class="card__img"></div>
<div class="card__text">
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
</div>
</li>
<li class="card">
<h2 class="card__title">カードのタイトル</h2>
<div class="card__img"></div>
<div class="card__text">
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
</div>
</li>
<li class="card">
<h2 class="card__title">カードのタイトル</h2>
<div class="card__img"></div>
<div class="card__text">
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
</div>
</li>
<li class="card">
<h2 class="card__title">カードのタイトル</h2>
<div class="card__img"></div>
<div class="card__text">
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
</div>
</li>
<li class="card">
<h2 class="card__title">カードのタイトル</h2>
<div class="card__img"></div>
<div class="card__text">
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
</div>
</li>
<li class="card">
<h2 class="card__title">カードのタイトル</h2>
<div class="card__img"></div>
<div class="card__text">
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
</div>
</li>
<li class="card">
<h2 class="card__title">カードのタイトル</h2>
<div class="card__img"></div>
<div class="card__text">
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
</div>
</li>
<li class="card">
<h2 class="card__title">カードのタイトル</h2>
<div class="card__img"></div>
<div class="card__text">
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
<p>カードのテキストが入ります</p>
</div>
</li>
</ul>
</section>
¥HTML¥
.card {
border: 1px solid;
}
.card__title {
font-weight: bold;
font-size: 16px;
padding: 8px;
}
.card__text {
padding: 10px;
font-size: 12px;
}
.card__img {
width: 100%;
height: 100px;
background-color: #0e6edf;
}
¥CSS¥
期待する画面
解答と解説（HTMLカードレイアウト作成）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
カードレイアウトの実装では、「横並び」「余白設計」「可変要素への対応」が重要なポイントになります。
今回のように3列でカードを並べる場合、まず各カード（li要素など）に対して幅を指定し、全体が均等に並ぶように設計します。
ここでcalc()関数を使うことで、「親要素の幅 ÷ 列数 − 余白」といった柔軟なレイアウト調整が可能になります。
次に余白の調整です。
カード間の左右8px・上下16pxの余白は、marginを使って設定しますが、そのままだと端の余白がズレてしまうことがあります。
そのため、nth-child(3n)を使って3列ごとの最後の要素の右マージンを調整し、レイアウトの崩れを防ぎます。
また、カードが複数行にまたがる場合、最後の行が中央寄せになる問題があります。
これを解決するために、ダミー要素（空のカード）を追加し、見た目上は存在しない要素でレイアウトを補完します。
.dummyクラスに対してボーダーや背景を消すことで、自然な左詰レイアウトを維持できます。
このような実装は、WordPressなどのCMSでカード数が動的に変わる場合にも有効です。
単純に並べるだけでなく、「どんなデータ数でも崩れない設計」にすることが上級者のポイントです。
レイアウトの仕組みを理解しておくことで、応用力が大きく伸びます。
このようなhtmlカードレイアウトは、ブログ一覧・ECサイト・ポートフォリオなど幅広い場面で使用されるため、再現性の高い実装として覚えておくことが重要です。
補足
htmlカードレイアウトでは、nth-childによる要素制御やダミー要素を使った調整が重要です。
特に要素数が変動する場面では、崩れない設計が求められます。
実務でも頻出のため、この考え方は確実に押さえておきましょう。
・カード関連問題：テキストに3点リーダーを反映させよう
・問題集一覧：HTML/CSS問題集トップ
・CSSの基礎から学びたい方：CSS入門講座
↓なんとなく理解で終わらせないために、下のポイントも確認しておきましょう。
ポイント
htmlカードレイアウトを崩さず並べるコツ
htmlカードレイアウトでは、横並びのバランスと余白設計が重要になります。
nth-childを使うことで特定要素の余白調整ができ、見た目のズレを防ぐことができます。
また、ダミー要素を使った左詰調整は、要素数が変わる場面でもレイアウトを崩さない実務的なテクニックです。
こうした細かい制御が、完成度の高いUIにつながります。
