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

CSSで3カラムのレイアウトグリッドを作成する方法【コード例付き】

CSSを使って3列（3カラム）のレイアウトグリッドを作成するには、floatプロパティと幅の指定を組み合わせるのが基本的な手法です。各カラムの幅を約33%に設定して左寄せにすることで、3つの列を横並びに配置できます。以下に具体的なコード例を示します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        padding: 1%;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .left, .right, .center {
        float: left;
        width: 33%;
        color: white;
        padding: 10px;
        height: 500px;
        text-align: center;
    }
    .left {
        background-color: tomato;
    }
    .right {
        background-color: teal;
    }
    .center {
        background-color: rgb(166, 71, 255);
    }
    .container:after {
        clear: both;
    }
</style>
</head>
<body>
<h1 style="text-align: center;">Three Column grid example</h1>
<div class="container">
<div class="left">
<h1>Some text on the left</h1>
</div>
<div class="center">
<h1>Some text in center</h1>
</div>
<div class="right">
<h1>Some text on the right</h1>
</div>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、以下のように3つのカラムが横並びに表示されます。

CSSで3カラムのレイアウトグリッドを作成する方法【コード例付き】

コードのポイント

  • box-sizing: border-box; を指定することで、paddingやborderを含めた状態でwidthが計算され、レイアウト崩れを防げます。
  • 各カラムに float: left; と width: 33%; を設定し、3列を横並びにしています。
  • .container:after { clear: both; } により、floatによる回り込みを解除し、親要素の高さを正しく保持します。

なお、近年ではFlexboxやCSS Gridレイアウトを使うことで、より柔軟かつシンプルに3カラムレイアウトを実現することも可能です。用途に応じて使い分けるとよいでしょう。

  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 {