CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでレスポンシブなカラムカードを作成する方法【コード例付きで解説】

CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブなカラムカードを簡単に作成できます。本記事では、floatとcalc()、そしてメディアクエリを組み合わせた基本的な実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。

レスポンシブカラムカードの仕組み

この手法のポイントは、主に以下の3つです。

  • calc(25% - 20px)：4枚のカードを横並びにするため、各カードの幅を「全体の25%からマージン分を引いた値」として計算しています。
  • float: left：カードを左に回り込ませることで、横一列に並べています。
  • @mediaクエリ：画面幅が600px以下になったタイミングで、カードの幅を100%に変更し、縦1列のレイアウトへ自動的に切り替えます。

コード例

以下が、レスポンシブカラムカードの完全なサンプルコードです。そのままHTMLファイルとして保存すれば、すぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .card {
        color: white;
        float: left;
        width: calc(25% - 20px);
        padding: 10px;
        border-radius: 10px;
        margin: 10px;
        height: 200px;
    }
    .card p {
        font-size: 18px;
    }
    .cardContainer:after {
        content: "";
        display: table;
        clear: both;
    }
    @media screen and (max-width: 600px) {
        .card {
            width: 100%;
        }
    }
</style>
</head>
<body>
<h1>Responsive column card Example</h1>
<h2>Resize the screen to see the below cards resize themselves</h2>
<div class="cardContainer">
<div class="card" style="background-color:rgb(153, 29, 224);">
<h2>First card</h2>
<p>Some text</p>
</div>
<div class="card" style="background-color:rgb(12, 126, 120);">
<h2>Second card</h2>
<p>Some text</p>
</div>
<div class="card" style="background-color:rgb(207, 41, 91);">
<h2>Third card</h2>
<p>Some text</p>
</div>
<div class="card" style="background-color:rgb(204, 91, 39);">
<h2>Fourth card</h2>
<p>Some text</p>
</div>
</div>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のように色分けされた4枚のカードが横並びで表示されます。

CSSでレスポンシブなカラムカードを作成する方法【コード例付きで解説】

画面幅を600px以下にした場合

ブラウザの幅を600px以下に縮小すると、メディアクエリが適用され、各カードの幅が100%に切り替わります。その結果、カードは画面幅いっぱいに広がり、縦1列のレイアウトへと自動的に変化します。

CSSでレスポンシブなカラムカードを作成する方法【コード例付きで解説】

補足：floatのクリア（clearfix）について

floatを使用する場合、親要素の高さが崩れる問題が発生します。このサンプルでは、.cardContainer:afterにcontent: ""、display: table、clear: bothを指定する「clearfix」と呼ばれるテクニックを使い、回り込みを解除しています。これにより、コンテナがカードの高さを正しく保持できるようになります。

まとめ

floatとcalc()、メディアクエリを組み合わせることで、追加のライブラリなしにレスポンシブなカラムカードを実装できます。よりモダンな実装を求める場合は、FlexboxやCSS Gridを使うと、floatの解除が不要になり、より柔軟で保守しやすいレイアウトが実現できるので、あわせて検討してみてください。

  1. CSSで作るレスポンシブ対応のお客様の声（テスティモニアル）セクションの実装方法

    Webサイトに掲載する「お客様の声（テスティモニアル）」は、信頼性を高めるための重要な要素です。CSSを活用すれば、デスクトップでもスマートフォンでも見やすい、レスポンシブなデザインを簡単に実現できます。 この記事では、メディアクエリとfloatを使って、画面幅に応じてレイアウトが自動的に切り替わるテスティモニアルカードの作り方を解説します。 実装のポイント 基本レイアウト： プロフィール画像を float: left; で左に回り込みさせ、名前とコメントを右側に配置します。 円形画像： border-radius: 50%; を指定することで、画像を丸く表示できます。 float の解除：

  2. CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】

    CSSを使ってレスポンシブなブログレイアウトを作成するには、viewportメタタグの設定と、デバイスの画面幅に応じて柔軟に調整されるレイアウト構造の定義がポイントになります。以下に、ナビゲーションバー・ブログ本文・サイドリンク・フッターを備えた、ブログサイトの完全なコード例を紹介します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <