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

CSSで高さの揃ったカラム（列）を作成する方法

Webページのレイアウトでは、複数のカラム（段組み）の高さを揃えたい場面がよくあります。各カラムに入るコンテンツ量が異なっても、背景色やボーダーがきれいに揃っていると、デザイン全体の見栄えが大きく向上します。

CSSで等しい高さのカラムを作成するには？

もっともシンプルで確実な方法のひとつが、display: table と display: table-cell を使う手法です。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;
    }
    .container {
        display: table;
        width: 100%;
    }
    .column {
        display: table-cell;
        padding: 16px;
        background-color: greenyellow;
    }
    .column:nth-of-type(2n-1) {
        color: red;
        background-color: yellow;
    }
</style>
</head>
<body>
<h1>Equal Height Columns Example</h1>
<div class="container">
<div class="column">
<h2>Column 1</h2>
<h2>Column 1</h2>
<h2>Column 1</h2>
</div>
<div class="column">
<h2>Column 2</h2>
<h2>Column 2</h2>
<h2>Column 2</h2>
</div>
<div class="column">
<h2>Column 3</h2>
<h2>Column 3</h2>
<h2>Column 3</h2>
</div>
</div>
</body>
</html>

実装のポイント

  • 親要素（.container）に display: table を指定し、幅を100%に設定することで、テーブル全体として機能させます。
  • 子要素（.column）に display: table-cell を指定すると、各カラムがテーブルセルのように振る舞い、最も内容の多いカラムに合わせて高さが自動的に揃います。
  • :nth-of-type(2n-1) 疑似クラスを使用して、奇数番目のカラムに対して文字色（赤）と背景色（黄色）を個別に適用しています。

表示結果

上記のコードをブラウザで開くと、3つのカラムが横並びで配置され、それぞれのコンテンツ量に関係なく高さが完全に揃った状態で表示されます。奇数番目のカラムだけ色が変わり、視覚的にも違いがひと目でわかるようになっています。

CSSで高さの揃ったカラム（列）を作成する方法

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

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブなカラムカードを簡単に作成できます。本記事では、floatとcalc()、そしてメディアクエリを組み合わせた基本的な実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 レスポンシブカラムカードの仕組み この手法のポイントは、主に以下の3つです。 calc(25% - 20px)：4枚のカードを横並びにするため、各カードの幅を「全体の25%からマージン分を引いた値」として計算しています。 float: left：カードを左に回り込ませることで、横一列に並べています。 @mediaクエリ：画面幅が

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

    CSSを使って混合カラムレイアウトグリッドを作成するには、floatプロパティでカラムを横並びにし、メディアクエリで画面幅ごとにカラムの幅を切り替えるのが基本の考え方です。ここでは、実際に動作するサンプルコードをもとに、その実装手順をわかりやすく解説します。 実装コード例 以下のコードでは、4つのカラムを持つレイアウトを作成しています。画面幅に応じてカラム数が自動的に変化するレスポンシブ設計になっています。 <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu