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

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

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

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

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

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

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. フレックスボックスでカードを横に並べる

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. メディアクエリでスマホ版の見た目に切り替える

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. カードの内側の余白を整えて美しく見せる

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

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

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

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

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. はみ出しを防ぐボックス・サイジングの秘密

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

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

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

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

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

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

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

まとめ

まとめ

CSSでレスポンシブなカードレイアウトを作るときは、まずカードを一つずつ作ることよりも、複数のカードをどのように並べるかを考えることが重要です。パソコンではカードを横に三枚並べ、スマートフォンでは一枚ずつ縦に並べるようなレイアウトは、現在のWebサイトで非常によく使われています。ブログの記事一覧、ニュースサイト、商品一覧、サービス紹介、スタッフ紹介など、さまざまなページで応用できる基本的なデザインです。

このように画面幅に合わせて表示方法を変える仕組みをレスポンシブデザインと呼びます。パソコン、タブレット、スマートフォンでは画面の横幅が大きく異なるため、同じ横幅のカードをそのまま表示すると、文字が読みにくくなったり、画像がはみ出したりすることがあります。そこでCSSを使って、画面が広いときは横並び、狭いときは縦並びになるように調整します。

レスポンシブなカードレイアウトを作る基本となるのがFlexboxです。カードを囲む親要素にdisplayのflexを指定すると、その中にある子要素を横方向に並べることができます。さらにflex-wrapのwrapを指定しておけば、横幅にカードが入りきらなくなったときに、自動的に次の行へ折り返せます。この二つを組み合わせるだけでも、画面幅に対応しやすい柔軟なカードレイアウトを作ることができます。

Flexboxでは親要素と子要素の関係を意識する

Flexboxを理解するときは、カードそのものだけを見るのではなく、カードをまとめて囲んでいる親要素にも注目しましょう。displayのflexやflex-wrapは、基本的にカードを並べる親要素へ指定します。その親要素の中に複数のカードを配置することで、それぞれのカードが横方向へ並びます。

カード同士の間隔を調整したい場合はgapを使うと便利です。以前はカードごとにmarginを設定して間隔を作る方法もよく使われていましたが、Flexboxではgapを使うことで、横方向と縦方向の隙間をまとめて管理できます。カードを追加しても同じ間隔が自動的に適用されるため、コードも分かりやすくなります。

カードの横幅を調整して複数枚を並べる

パソコン画面でカードを三枚横に並べたい場合は、一枚あたりの横幅を画面全体の三分の一程度に設定します。ただし、カード同士のgapやpadding、borderなどもあるため、単純に三十三パーセントと指定すると横幅が足りなくなることがあります。そのため、レイアウトを確認しながらwidthやflexの値を調整する必要があります。

CSSではcalcを使って計算式を指定する方法もあります。たとえばカードの横幅を三分の一程度にしながら、カード同士の隙間分を差し引くことができます。この方法を使うと、画面幅に合わせてカードのサイズが自動的に変化するため、固定されたピクセルだけで横幅を指定するよりもレスポンシブなレイアウトを作りやすくなります。

メディアクエリでスマートフォン表示へ切り替える

Flexboxとflex-wrapだけでもカードは折り返されますが、スマートフォンでは一枚のカードを画面いっぱいに表示したほうが読みやすい場合があります。そこで使うのがメディアクエリです。メディアクエリでは、画面幅が指定したサイズ以下になった場合だけ適用するCSSを書くことができます。

たとえばパソコンではカードの横幅を三割程度にして三枚並べ、画面幅が七百六十八ピクセル以下になったときにカードの横幅を百パーセントへ変更します。すると、パソコンでは三列、スマートフォンでは一列という分かりやすいレスポンシブレイアウトになります。

CSS初心者のうちは、メディアクエリを難しい機能だと感じるかもしれません。しかし、実際には画面幅に条件を付けて、条件に当てはまったときだけ別のCSSを適用しているだけです。まずはカードのwidthを変更するところから練習すると仕組みを理解しやすくなります。

カードの余白や角丸で見やすさを整える

レスポンシブ対応ができても、カードの中に文字や画像が詰め込まれていると読みづらくなります。カードの内側にはpaddingを設定して、枠線と文字の間に適度な余白を作ることが大切です。余白があるだけでタイトルや説明文が読みやすくなり、カード全体も整理された印象になります。

border-radiusを使えばカードの角を丸くできます。さらにbox-shadowを使って薄い影を付けると、背景からカードが少し浮き上がったようなデザインになります。ただし、影を強くしすぎると重たい印象になるため、薄い色と小さめの数値から試すとよいでしょう。

カードデザインでは装飾を増やすことよりも、画像、タイトル、説明文の順番や余白を揃えることが重要です。同じ種類のカードでpaddingや文字サイズがバラバラになっていると、ページ全体が不揃いに見えます。共通のクラスを使ってスタイルをまとめると、統一感のあるWebデザインになります。

画像はobject-fitでサイズを揃える

カードレイアウトでは、画像の大きさや縦横比が異なることがよくあります。画像ごとに高さが変わると、その下に表示されるタイトルや説明文の位置までずれてしまい、カードがガタガタに並んで見える原因になります。

この問題を解決するときに便利なのがobject-fitです。画像に一定のwidthとheightを指定し、object-fitのcoverを設定すると、画像の縦横比を保ちながら指定した枠いっぱいに表示できます。枠から余る部分は自動的に調整されるため、異なるサイズの画像でも統一されたカードデザインを作りやすくなります。

ブログの記事一覧や商品一覧では、画像の高さが揃っているだけでもページ全体がかなり見やすくなります。レスポンシブカードを作るときは、カードの横幅だけでなく、中に表示する画像のサイズにも注目することが大切です。

box-sizingで横幅の計算を分かりやすくする

CSS初心者がレスポンシブレイアウトでつまずきやすい原因の一つが、widthとpaddingとborderの合計サイズです。通常の設定では、widthで指定した横幅とは別にpaddingやborderが追加されるため、計算した横幅よりも要素が大きくなる場合があります。

そこで便利なのがbox-sizingのborder-boxです。この設定を使うと、指定したwidthの中にpaddingとborderも含めて計算されるため、カードの横幅を管理しやすくなります。特にwidthを百パーセントにしたカードや、複数枚を横に並べるレイアウトでは、予期しない横スクロールやはみ出しを防ぎやすくなります。

レスポンシブデザインを作っていて、カードが少しだけ画面の外にはみ出す場合や、不自然な横スクロールが表示される場合は、widthだけでなくpadding、border、box-sizingも確認してみましょう。

レスポンシブカードをまとめて確認するサンプル

次のサンプルでは、Flexbox、gap、メディアクエリ、object-fit、box-sizingを組み合わせています。パソコンでは三枚のカードが横に並び、画面幅が狭くなると一枚ずつ縦に表示されます。画像の高さも揃えているため、カード全体の見た目を統一できます。

<style>
    .responsive-card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .responsive-card {
        width: calc(33.333% - 14px);
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 15px;
        box-sizing: border-box;
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .responsive-card img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 6px;
    }

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

    @media (max-width: 768px) {
        .responsive-card {
            width: 100%;
        }
    }
</style>

<div class="responsive-card-container">
    <div class="responsive-card">
        <img src="/img/sample150-100.jpg" alt="レスポンシブカードのサンプル画像">
        <h3>カードタイトル一</h3>
        <p>パソコンでは横並び、スマートフォンでは縦並びになるカードです。</p>
    </div>

    <div class="responsive-card">
        <img src="/img/sample150-100.jpg" alt="レスポンシブカードのサンプル画像">
        <h3>カードタイトル二</h3>
        <p>Flexboxとメディアクエリを組み合わせて表示を切り替えています。</p>
    </div>

    <div class="responsive-card">
        <img src="/img/sample150-100.jpg" alt="レスポンシブカードのサンプル画像">
        <h3>カードタイトル三</h3>
        <p>画像にはobject-fitを指定して高さを揃えています。</p>
    </div>
</div>

このサンプルでは、親要素のresponsive-card-containerにdisplayのflexとflex-wrapを指定しています。gapを使ってカード同士の間隔も統一しています。子要素となるresponsive-cardには横幅を設定し、パソコン画面では三枚程度が横に並ぶようにしています。

カードにはbox-sizingのborder-boxを指定しているため、paddingやborderを含めた状態で横幅が計算されます。レスポンシブデザインでは幅の計算が重要なので、カードがはみ出す場合の対策として覚えておくと便利です。

画像にはwidthを百パーセント、heightを固定値、object-fitをcoverに指定しています。これによって、元画像の縦横比が異なっていても、カード内では同じ大きさに見えるようになります。複数のカードを並べたときに画像部分が揃うため、Webページ全体に統一感が生まれます。

メディアクエリでは、画面幅が七百六十八ピクセル以下になった場合にカードの横幅を百パーセントへ変更しています。この一つの指定だけで、パソコンでは横並び、スマートフォンでは縦並びというレスポンシブなカードレイアウトを実現できます。

開発者ツールで画面幅を変えて確認する

レスポンシブデザインはCSSを書くだけで終わりではありません。実際に画面幅を変更し、どのタイミングでカードが横並びから縦並びへ変化するのかを確認する必要があります。Google Chromeなどのブラウザに用意されている開発者ツールを使えば、パソコン上でもスマートフォンに近い画面幅を再現できます。

開発者ツールのデバイス表示を利用して、画面幅を少しずつ狭くしてみましょう。カードが途中で窮屈になっていないか、文字が読みにくくなっていないか、画像がはみ出していないかなどを確認します。七百六十八ピクセルという数値も必ずしもすべてのサイトに共通する正解ではないため、実際のデザインに合わせて調整することが大切です。

また、スマートフォンだけでなく、パソコンとスマートフォンの中間となるタブレット程度の画面幅も確認すると、より安定したレイアウトになります。必要であれば、パソコンでは三列、タブレットでは二列、スマートフォンでは一列という三段階の切り替えを作ることもできます。

カードレイアウトは実際のWeb制作で幅広く使える

レスポンシブなカードレイアウトは、CSSを学ぶうえで非常に実用的な題材です。Flexboxによる横並び、flex-wrapによる折り返し、gapによる間隔調整、メディアクエリによる画面幅ごとの切り替え、object-fitによる画像サイズの統一、box-sizingによる横幅計算など、Web制作で頻繁に利用するCSSの基本をまとめて練習できます。

初心者のうちは、最初から複雑なカードデザインを作ろうとせず、まず二枚や三枚のカードを横に並べるところから始めるとよいでしょう。そのあとブラウザの横幅を小さくして折り返しを確認し、メディアクエリで一列表示へ切り替えます。さらに画像の大きさ、余白、角丸、影などを追加していけば、一つずつ仕組みを理解しながら完成度を高められます。

CSSでレスポンシブなカードレイアウトを作れるようになると、ブログの記事一覧や商品一覧だけでなく、サービス紹介、料金プラン、講師紹介、制作実績、ニュース一覧など、さまざまなWebページに応用できます。画面の大きさが変わっても読みやすく操作しやすいレイアウトを作ることは、現在のWeb制作に欠かせない基本技術です。

Flexboxとメディアクエリは別々の機能ですが、レスポンシブカードではセットで使うことが多くなります。Flexboxで通常時の並び方を作り、メディアクエリで画面が狭くなったときの表示を変更するという流れを覚えておくと、ほかのレスポンシブレイアウトにも応用しやすくなります。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

CSSでレスポンシブなカードレイアウトとは何ですか？初心者でも理解できますか？

レスポンシブなカードレイアウトとは、パソコン・スマホ・タブレットなど画面サイズに合わせてカードの並び方が自動で変わるレイアウトです。CSSを使えば初心者でも作成でき、パソコンでは横並び、スマホでは縦並びに切り替えることができます。