この記事では、CSSの2列レイアウトと3列レイアウトの具体的な使い方をまとめます。

序文

大規模なフロントエンドの開発に伴い、UI フレームワークが次々と登場し、フロントエンド開発における CSS 機能の要件はそれほど高くも厳しくもなくなりました。少なくとも、その重要性は JS プログラミングほどではありません。しかし、基本的な CSS を習得する必要があります。今日は、CSS レイアウトの方法をまとめます。

2列レイアウト

左の列は固定幅、右の列は適応幅です

フロート+マージンレイアウト

HTMLコード

<本文>
  <div id="left">左列の幅を固定</div>
  <div id="right">右列に適応</div>
</本文>

CSSコード:

＃左 {
  フロート: 左;
  幅: 200ピクセル;
  高さ: 400px;
  背景色: 水色;
}
＃右 {
  margin-left: 200px; /* 左の列の幅以上*/
  高さ: 400px;
  背景色: 薄緑;
}

フロート+オーバーフローレイアウト

HTMLコード

<本文>
  <div id="left">左列の幅を固定</div>
  <div id="right">右列に適応</div>
</本文>

CSSコード

＃左 {
  フロート: 左;
  幅: 200ピクセル;
  高さ: 400px;
  背景色: 水色;
}
＃右 {
  オーバーフロー: 非表示;
  高さ: 400px;
  背景色: 薄緑;
}

絶対位置レイアウト

HTMLコード:

<本文>
  <div id="親">
    <div id="left">左列の幅を固定</div>
    <div id="right">右列に適応</div>
  </div>
</本文>

CSSコード:

＃親 {
  位置: 相対的;
}
＃左 {
  位置: 絶対;
  上: 0;
  左: 0;
  幅: 200ピクセル;
  高さ: 400px;
  背景色: 水色;
}
＃右 {
  位置: 絶対;
  上: 0;
  左: 200px;
  右: 0;
  高さ: 400px;
  背景色: 薄緑;
}

テーブルレイアウト

HTMLコード:

<本文>
  <div id="親">
    <div id="left">左列の固定幅</div>
    <div id="right">右列に適応</div>
  </div>
</本文>

CSSコード:

＃親 {
  幅: 100%;
  高さ: 400px;
  表示: テーブル;
}
＃左、
＃右 {
  表示: テーブルセル;
}
＃左 {
  幅: 200ピクセル;
  背景色: 水色;
}
＃右 {
  背景色: 薄緑;
}

フレックスレイアウト

HTMLコード:

<本文>
  <div id="親">
    <div id="left">左列の固定幅</div>
    <div id="right">右列に適応</div>
  </div>
</本文>

CSSコード:

＃親 {
  幅: 100%;
  高さ: 400px;
  ディスプレイ: フレックス;
}
＃左 {
  幅: 200ピクセル;
  背景色: 水色;
}
＃右 {
  フレックス: 1;
  背景色: 薄緑;
}

グリッドレイアウト

HTMLコード:

<本文>
  <div id="親">
    <div id="left">左列の幅を固定</div>
    <div id="right">右列に適応</div>
  </div>
</本文>

CSSコード:

＃親 {
  幅: 100%;
  高さ: 400px;
  表示: グリッド;
  グリッドテンプレート列: 200px 自動;
}
＃左 {
  背景色: 水色;
}
＃右 {
  背景色: 薄緑;
}

左の列の幅は可変で、右の列は適応型です

左の列のボックスの幅はコンテンツの増加や減少に応じて変化し、右の列のボックスはそれに応じて変化します。

フロート+オーバーフローレイアウト

HTMLコード:

<本文>
  <div id="left">左列の可変幅</div>
  <div id="right">右列に適応</div>
</本文>

CSSコード:

＃左 {
  フロート: 左;
  高さ: 400px;
  背景色: 水色;
}
＃右 {
  オーバーフロー: 非表示;
  高さ: 400px;
  背景色: 薄緑;
}

フレックスレイアウト

HTMLコード:

<本文>
  <div id="親">
    <div id="left">左列の可変幅</div>
    <div id="right">右列に適応</div>
  </div>
</本文>

CSSコード:

＃親 {
  ディスプレイ: フレックス;
  高さ: 400px;
}
＃左 {
  背景色: 水色;
}
＃右 {
  フレックス: 1;
  背景色: 薄緑;
}

グリッドレイアウト

HTMLコード:

<本文>
  <div id="親">
    <div id="left">左列の可変幅</div>
    <div id="right">右列に適応</div>
  </div>
</本文>

CSSコード:

＃親 {
  表示: グリッド;
  グリッドテンプレート列: 自動 1fr;
  高さ: 400px;
}
＃左 {
  背景色: 水色;
}
＃右 {
  背景色: 薄緑;
}

3列レイアウト

固定幅の列が 2 つ、適応幅の列が 1 つ

フロート+マージンレイアウト

HTMLコード:

<本文>
  <div id="親">
    <div id="left">左列の幅を固定</div>
    <div id="center">中央の列の幅を固定</div>
    <div id="right">右列に適応</div>
  </div>
</本文>

CSSコード:

＃親 {
  高さ: 400px;
}
＃左 {
  フロート: 左;
  幅: 100ピクセル;
  高さ: 400px;
  背景色: 水色;
}
＃中心 {
  フロート: 左;
  幅: 200ピクセル;
  高さ: 400px;
  背景色: ライトグレー;
}
＃右 {
  margin-left: 300px; /* 左の列の幅 + 中央の列の幅*/
  高さ: 400px;
  背景色: 薄緑;
}

フロート+オーバーフローレイアウト

HTMLコード:

<本文>
  <div id="親">
    <div id="left">左列の幅を固定</div>
    <div id="center">中央の列の幅を固定</div>
    <div id="right">右列に適応</div>
  </div>
</本文>

CSSコード:

＃親 {
  高さ: 400px;
}
＃左 {
  フロート: 左;
  幅: 100ピクセル;
  高さ: 400px;
  背景色: 水色;
}
＃中心 {
  フロート: 左;
  幅: 200ピクセル;
  高さ: 400px;
  背景色: ライトグレー;
}
＃右 {
  オーバーフロー: 非表示;
  高さ: 400px;
  背景色: 薄緑;
}

テーブルレイアウト

HTMLコード:

<本文>
  <div id="親">
    <div id="left">左列の固定幅</div>
    <div id="center">中央の列の幅を固定</div>
    <div id="right">右列に適応</div>
  </div>
</本文>

CSSコード:

＃親 {
  表示: テーブル;
  幅: 100%;
  高さ: 400px;
}
＃左 {
  表示: テーブルセル;
  幅: 100ピクセル;
  背景色: 水色;
}
＃中心 {
  表示: テーブルセル;
  幅: 200ピクセル;
  背景色: ライトグレー;
}
＃右 {
  表示: テーブルセル;
  背景色: 薄緑;
}

フレックスレイアウト

HTMLコード:

<本文>
  <div id="親">
    <div id="left">左列の幅を固定</div>
    <div id="center">中央の列の幅を固定</div>
    <div id="right">右列に適応</div>
  </div>
</本文>

CSSコード:

＃親 {
  ディスプレイ: フレックス;
  幅: 100%;
  高さ: 400px;
}
＃左 {
  幅: 100ピクセル;
  背景色: 水色;
}
＃中心 {
  幅: 200ピクセル;
  背景色: ライトグレー;
}
＃右 {
  フレックス: 1;
  背景色: 薄緑;
}

グリッドレイアウト

HTMLコード

<本文>
  <div id="親">
    <div id="left">左列の幅を固定</div>
    <div id="center">中央の列の幅を固定</div>
    <div id="right">右列に適応</div>
  </div>
</本文>

CSSコード

＃親 {
  表示: グリッド;
  グリッドテンプレート列: 100px 200px 自動;
  幅: 100%;
  高さ: 400px;
}
＃左 {
  背景色: 水色;
}
＃中心 {
  背景色: ライトグレー;
}
＃右 {
  背景色: 薄緑;
}

左右の幅は固定、中央は適応型

Holy Grail レイアウトと Double Wing レイアウトの目的は、最初に中央部分をロードし、次に比較的重要でないものを左側と右側の部分にロードすることです。

聖杯レイアウト

聖杯レイアウト: 中央のコンテンツがブロックされないように、中央の div (または最も外側の親 div) に padding-left と padding-right (左右の幅に等しい値) を設定し、左と右の div に position: relative を使用し、それぞれ left 属性と right 属性を使用して、左と右の列の div が移動後に中央の div をブロックしないようにします。

HTMLコード:

<本文>
  <div id="親">
    <div id="center">中央の列</div>
    <div id="left">左の列</div>
    <div id="right">右の列</div>
  </div>
</本文>

CSSコード:

＃親 {
  高さ: 400px;
  パディング: 0 200px;
  オーバーフロー: 非表示;
}
＃左、
＃右 {
  フロート: 左;
  幅: 200ピクセル;
  高さ: 100%;
  位置: 相対的;
  背景色: 水色;
}
＃左 {
  margin-left: -100%; /* #left を 1 行上に移動する*/
  左: -200px;
}
＃右 {
  右: -200px;
  margin-left: -200px; /* #right を 1 行上に移動*/
}
＃中心 {
  フロート: 左;
  幅: 100%;
  高さ: 100%;
  背景色: ライトグレー;
}

ダブルウィングレイアウト

ダブルウィングレイアウトでは、中央の div のコンテンツがブロックされないように、中央の div 内に直接子 div を作成してコンテンツを配置し、子 div で margin-left と margin-right を使用して左列と右列の div 用のスペースを確保します。

HTMLコード:

<本文>
  <div id="親">
    <div id="center">
      <div id="center-inside">中央の列</div>
    </div>
    <div id="left">左の列</div>
    <div id="right">右の列</div>
  </div>
</本文>

CSSコード:

＃左、
＃右 {
  フロート: 左;
  幅: 200ピクセル;
  高さ: 400px;
  背景色: 水色;
}
＃左 {
  margin-left: -100%; /* #left を 1 行上に移動する*/
}
＃右 {
  margin-left: -200px; /* #right を 1 行上に移動*/
}
＃中心 {
  フロート: 左;
  幅: 100%;
  高さ: 400px;
  背景色: ライトグレー;
}
#中央内側 {
  高さ: 100%;
  マージン: 0 200px;
}

フレックス実装

HTMLコード:

<本文>
  <div id="親">
    <div id="center">中央の列</div>
    <div id="left">左の列</div>
    <div id="right">右の列</div>
  </div>
</本文>

CSSコード:

＃親 {
  ディスプレイ: フレックス;
}
＃左、
＃右 {
  フレックス: 0 0 200px;
  高さ: 400px;
  背景色: 水色;
}
＃左 {
  order: -1; /* #left を左側にする */
}
＃中心 {
  フレックス: 1;
  高さ: 400px;
  背景色: ライトグレー;
}

CSS 2 列レイアウトと 3 列レイアウトの具体的な使い方についてはこれで終わりです。CSS 2 列レイアウトと 3 列レイアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: 画像の半透明処理画像と半透明の背景の実装のアイデアとコード

>>: HTML 選択タグにおける単一選択と複数選択の詳細な説明