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

CSSで2カラムのレイアウトグリッドを作成する方法

CSSを使用すれば、画面を左右に分割した2カラム（2列）のレイアウトグリッドを簡単に作成できます。ここでは、position: fixedとwidth: 50%を組み合わせた基本的な実装方法を、実際のコード例とともに解説します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: Arial;
        color: white;
    }
    .left, .right {
        height: 50%;
        width: 50%;
        position: fixed;
        overflow-x: hidden;
        padding-top: 20px;
    }
    .left {
        left: 0;
        background-color: rgb(36, 0, 95);
    }
    .right {
        right: 0;
        background-color: rgb(56, 1, 44);
    }
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .centered img {
        width: 150px;
        border-radius: 50%;
    }
</style>
</head>
<body>
<h1 style="color: black;">Two column layout grid example</h1>
<div class="left">
<h1>Some random text on the left</h1>
</div>
<div class="right">
<h1>Some random text on the right</h1>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、画面が左右2つの領域に分割され、それぞれ異なる背景色が適用された2カラムレイアウトが表示されます。

CSSで2カラムのレイアウトグリッドを作成する方法

コードのポイント解説

  • width: 50% — 左右の各要素が画面幅の半分を占めるように設定することで、均等な2カラム構成を実現しています。
  • position: fixed — 要素をビューポートに対して固定配置するため、ページをスクロールしてもレイアウトが崩れません。
  • left: 0 / right: 0 — .leftクラスは左端に、.rightクラスは右端に配置されます。
  • overflow-x: hidden — 横方向にはみ出したコンテンツを非表示にし、意図しない横スクロールやレイアウト崩れを防止します。
  • .centeredクラス — top: 50%とleft: 50%に加えてtransform: translate(-50%, -50%)を指定することで、要素を領域内の正確な中央に配置できます。

この手法はシンプルながら応用範囲が広く、ランディングページの左右分割デザインや比較コンテンツの表示など、さまざまな場面で活用できます。レスポンシブ対応が必要な場合は、メディアクエリを追加してモバイル表示時に縦積み（1カラム）へ切り替えるのもおすすめです。

  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 {