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

CSSで混合カラムレイアウトグリッドを作成する方法【レスポンシブ対応】

CSSを使って混合カラムレイアウトグリッドを作成するには、floatプロパティでカラムを横並びにし、メディアクエリで画面幅ごとにカラムの幅を切り替えるのが基本の考え方です。ここでは、実際に動作するサンプルコードをもとに、その実装手順をわかりやすく解説します。

実装コード例

以下のコードでは、4つのカラムを持つレイアウトを作成しています。画面幅に応じてカラム数が自動的に変化するレスポンシブ設計になっています。

<!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;
    }
    .col {
        color: white;
        float: left;
        width: 25%;
        padding: 10px;
    }
    .colContainer:after {
        content: "";
        display: table;
        clear: both;
    }
    @media screen and (max-width: 900px) {
        .col {
            width: 50%;
        }
    }
    @media screen and (max-width: 600px) {
        .col {
            width: 100%;
        }
    }
</style>
</head>
<body>
<h1>Mixed col Layout Example</h1>
<h2>Resize the screen to see the below divs resize themselves</h2>
<div class="colContainer">
<div class="col" style="background-color:rgb(153, 29, 224);">
<h2>First col</h2>
</div>
<div class="col" style="background-color:rgb(12, 126, 120);">
<h2>Second col</h2>
</div>
<div class="col" style="background-color:rgb(207, 41, 91);">
<h2>Third col</h2>
</div>
<div class="col" style="background-color:rgb(204, 91, 39);">
<h2>Fourth col</h2>
</div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。初期状態では4つのカラムが横一列に並びます。

CSSで混合カラムレイアウトグリッドを作成する方法【レスポンシブ対応】

ブラウザのウィンドウ幅を狭めていくと、メディアクエリの条件に合わせて4カラムのレイアウトが2カラムへと変化します。さらに幅を狭めると、各カラムは縦に積み重なる1カラム表示になります。

CSSで混合カラムレイアウトグリッドを作成する方法【レスポンシブ対応】

コードのポイント解説

  • box-sizing: border-box … すべての要素に指定することで、paddingやborderを含めた状態でwidthを計算でき、レイアウト崩れを防げます。
  • float: left … 各カラム（.col）を左寄せで横並びにしています。width: 25%により、4つのカラムがちょうど1行に収まります。
  • clearfix（.colContainer:after） … floatによる回り込みを解除する定番テクニックです。content・display: table・clear: bothの組み合わせで、親要素の高さを正しく保ちます。
  • メディアクエリ … 画面幅が900px以下になるとカラム幅が50%（2カラム）、600px以下になると100%（1カラム）に切り替わり、スマートフォンなどでも見やすいレイアウトを実現します。

まとめ

floatとメディアクエリを組み合わせれば、CSSだけで柔軟な混合カラムレイアウトグリッドを作成できます。なお、近年ではCSS GridやFlexboxを使うことで、より少ないコードで同様のレスポンシブレイアウトを実現できるため、新規プロジェクトではこれらの活用も検討するとよいでしょう。

  1. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル

  2. CSSで4列のレイアウトグリッドを作成する方法

    CSSで4列のレイアウトグリッドを作成するには、各カラムとなる要素に float: left; を指定し、幅を 25% に設定するのが基本的な手法です。これにより、4つの要素が横一列に均等に並びます。以下に具体的なコード例を示します。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body {