CSSでレスポンシブなカードレイアウトを作る方法！初心者向け完全ガイド

CSSだけでレスポンシブなカードレイアウトを作る方法

先生と生徒の会話形式で理解しよう

生徒

「ブログのトップページによくある、画像と説明がセットになった『カード』を並べたいのですが、スマホで見ると崩れてしまいます…。」

先生

「それは『レスポンシブ対応』ができていないからですね。画面の幅に合わせて、カードを横に並べたり縦に並べたり自動で変える仕組みを作れば解決しますよ。」

生徒

「難しそうですね…。初心者でもCSSだけで作れますか？」

先生

「もちろんです！最新のフレックスボックス（Flexbox）という技術を使えば、驚くほど簡単に作れます。一緒にやってみましょう！」

1. レスポンシブなカードレイアウトとは何か？

Webサイトにおける「カード」とは、画像、タイトル、短い説明文が一つの四角い枠の中に収まったデザインのことです。最近のニュースサイトやブログ、通販サイトなどで非常によく見かけるレイアウトです。プログラミング未経験の方にとって、まず目指すべきは「パソコンでは3つ横に並び、スマホでは縦に1つずつ並ぶ」という動きを作ることにあります。

このように、見る人の道具（デバイス）に合わせて、デザインが自動的に最適化されることを「レスポンシブデザイン」と呼びます。画面が広い時は空間を有効に使い、画面が狭いスマホの時は文字を読みやすく縦に並べる。この切り替えをCSSだけで行う方法を学んでいくことが、モダンなWeb制作への第一歩となります。

2. カードの土台となるHTMLの構造を準備する

まずは、カードを作るための「箱」を準備しましょう。HTMLでは「div（ディブ）」というタグを使って箱を作ります。大きな「親の箱」の中に、複数の「子のカード」を入れるイメージです。パソコンに詳しくない方向けに例えるなら、大きな段ボール箱（親）の中に、お菓子の小箱（カード）をいくつか並べて入れるような状態です。

このとき、それぞれのカードに名前（クラス名）をつけておくことで、後からCSSで「カードのデザインはこれ！」「大きな箱の並べ方はこれ！」と個別に指示を出すことができるようになります。まずはシンプルな構造から書いてみましょう。


<div class="card-container">
    <div class="card-item">
        <img src="/img/sample150-100.jpg" alt="サンプル画像">
        <h3>カードのタイトル1</h3>
        <p>ここにカードの説明文が入ります。スマホで見ても崩れないように設定します。</p>
    </div>
    <div class="card-item">
        <img src="/img/sample150-100.jpg" alt="サンプル画像">
        <h3>カードのタイトル2</h3>
        <p>フレックスボックスを使うと、カードが自動で整列するのでとても便利です。</p>
    </div>
    <div class="card-item">
        <img src="/img/sample150-100.jpg" alt="サンプル画像">
        <h3>カードのタイトル3</h3>
        <p>最後の一枚です。パソコンでは横に、スマホでは縦に並ぶ魔法をかけます。</p>
    </div>
</div>

ブラウザ表示

3. フレックスボックスでカードを横に並べる

次に、バラバラに縦に並んでいるカードを横一列に並べます。ここで使うのが「フレックスボックス（Flexbox）」です。親の箱に対して「display: flex;（ディスプレイ：フレックス）」と指示を出すだけで、中に入っているカードたちが一瞬で横に整列します。

さらに「flex-wrap: wrap;（フレックス・ラップ：ラップ）」という指示を追加します。これは「画面が狭くなって入りきらなくなったら、自動で次の行に折り返してね」という魔法の指示です。これこそがレスポンシブ対応の核となる部分です。これがないと、スマホで見ても無理やり横に並ぼうとして、カードが極細になってしまいます。


<style>
    .card-container {
        display: flex; /* 横に並べる */
        flex-wrap: wrap; /* 入りきらない時は折り返す */
        gap: 20px; /* カード同士の隙間を20pxあける */
        padding: 20px;
        background-color: #f0f0f0;
    }
    .card-item {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        width: calc(33.333% - 20px); /* 3つ並べるための計算 */
        box-sizing: border-box;
    }
    .card-item img {
        max-width: 100%; /* 画像が箱からはみ出さないように */
        height: auto;
    }
</style>

<div class="card-container">
    <div class="card-item">
        <img src="/img/sample120-120.jpg" alt="画像">
        <h3>Flexboxの基本</h3>
        <p>横並びに欠かせない技術です。</p>
    </div>
    <div class="card-item">
        <img src="/img/sample120-120.jpg" alt="画像">
        <h3>Gapの設定</h3>
        <p>隙間を簡単に作れます。</p>
    </div>
    <div class="card-item">
        <img src="/img/sample120-120.jpg" alt="画像">
        <h3>Wrapの役割</h3>
        <p>折り返しを許可します。</p>
    </div>
</div>

ブラウザ表示

4. メディアクエリでスマホ版の見た目に切り替える

パソコンでは3枚並びで綺麗に見えますが、スマホだと横幅が狭すぎて文字が読めません。そこで「メディアクエリ（Media Queries）」という機能を使います。これは「画面の横幅が〇〇ピクセル以下の時は、この特別な指示を読み込んでね」という、条件付きの命令です。

例えば「画面が768ピクセルより小さくなったら、カードの幅を100%（画面いっぱい）にする」という指示を書きます。すると、広い画面では優雅に横並びだったカードが、スマホでは画面いっぱいの大きさで縦に一列ずつ整然と並ぶようになります。これがレスポンシブなカードレイアウトの完成形です。


<style>
    .layout-box {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .card-part {
        background-color: #e3f2fd;
        padding: 20px;
        width: 31%; /* PCではだいたい3枚並び */
        text-align: center;
        box-sizing: border-box;
    }

    /* 画面幅が768px以下の時（スマホなど）の指示 */
    @media (max-width: 768px) {
        .card-part {
            width: 100%; /* スマホでは1枚並び（横幅いっぱい） */
        }
    }
</style>

<div class="layout-box">
    <div class="card-part">カードA</div>
    <div class="card-part">カードB</div>
    <div class="card-part">カードC</div>
</div>

ブラウザ表示

5. カードの内側の余白を整えて美しく見せる

カードを並べるだけでは「いかにも初心者」という見た目になってしまいます。プロっぽく見せるコツは「余白」です。カードの内側に適切な隙間を作ることで、情報が整理されて読みやすくなります。ここで使うのが「padding（パディング）」です。

画像とタイトルの距離、タイトルと説明文の距離を適度にあけることで、窮屈な印象がなくなります。また、カードの角を少し丸くする「border-radius（ボーダー・ラディウス）」や、うっすらと影をつける「box-shadow（ボックス・シャドウ）」を組み合わせると、画面からカードが浮き上がっているような立体感が生まれ、スマホユーザーが思わずタップしたくなる魅力的なデザインになります。

6. 画像の比率を固定してガタガタを防ぐ

カードレイアウトでよくある失敗が、画像の大きさがバラバラで、カードの高さがガタガタになってしまうことです。これを防ぐために、画像を入れる箱に特定の高さを指定したり、CSSの「object-fit: cover;（オブジェクト・フィット：カバー）」という命令を使ったりします。

これを使うと、どんな形の画像でも、カードの指定した枠の中に「良い感じにトリミング（切り抜き）」して収めてくれます。横長の画像や縦長の画像が混ざっていても、カード自体の形はピシッと揃うため、サイト全体に統一感が生まれます。プログラミングのコードはシンプルですが、この一行がデザインの完成度を大きく左右します。


<style>
    .image-card {
        width: 200px;
        border: 1px solid #333;
        overflow: hidden;
    }
    .image-card img {
        width: 100%;
        height: 150px; /* 高さを固定する */
        object-fit: cover; /* 画像を枠いっぱいに綺麗に収める */
    }
</style>

<div class="image-card">
    <img src="/img/sample150-100.jpg" alt="画像">
    <p style="padding:10px;">画像サイズが統一されるので、並べたときに綺麗に見えます。</p>
</div>

ブラウザ表示

7. はみ出しを防ぐボックス・サイジングの秘密

CSSで幅を100%にしたり、パディングを加えたりしていると、なぜかカードが画面を突き抜けて「横スクロール」が出てしまうことがあります。これは、CSSの標準設定では「指定した幅 + 余白 + 枠線の太さ」が合計のサイズになってしまうからです。初心者が最もハマりやすい罠の一つです。

これを解決するのが「box-sizing: border-box;（ボックス・サイジング：ボーダー・ボックス）」という命令です。これを書くと、「幅の中に余白も枠線も全部含めてね！」という指示になり、計算が狂わなくなります。この一行をコードの最初の方に書いておくだけで、レイアウト崩れの8割は防げると言っても過言ではありません。

8. 開発者ツールでレスポンシブの動きを確認する

コードが書けたら、実際にスマホでどう見えるか確認しましょう。でも、わざわざ自分のスマホに送って確認するのは面倒ですよね。そんな時はブラウザ（Google Chromeなど）の「検証（開発者ツール）」を使いましょう。画面を右クリックして「検証」を選ぶと、画面の裏側を覗ける画面が出てきます。

ここでスマホのアイコンをクリックすると、パソコンの画面上で「iPhoneで見たときの表示」などを再現できます。画面の端をマウスで掴んで、ゆっくり横幅を広げたり狭めたりしてみてください。カードが「カクッ」と動いて3枚から1枚に切り替わる瞬間が見えるはずです。この動きを確認しながら微調整をしていくのが、プロのエンジニアの日常的な作業スタイルです。皆さんも、自分の書いたコードが動く楽しさをぜひ体験してみてください！

2026年最新スキルアップ・実践セミナー