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

この記事では、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 選択タグにおける単一選択と複数選択の詳細な説明

推薦する

CSS コード省略 div+css レイアウト コード省略仕様

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...

MySQLデータストレージプロセスパラメータの詳細な例

MySQL ストアド プロシージャ パラメータには、in、out、inout の 3 種類があります...

MySQL ベースのストレージエンジンとログの説明 (包括的な説明)

1.1 ストレージエンジンの概要 1.1.1 ファイルシステムストレージファイル システム: オペ...

CSS モジュールソリューション

CSS のモジュール ソリューションは、JS のモジュール ソリューションと同じくらい多く存在すると...

JavaScript setinterval 1秒遅延ソリューション

setinterval を使用すると、ページを開いた直後に 1 秒の遅延後に実行されることがわかりま...

CSS3でカルーセル画像を作成する方法

スライドショーは Web ページでよく見られます。美しい写真が使われています。こちらは純粋な CSS...

vscode を使用したリモート Linux 開発の実装

過去に別れを告げるvscode にリモート SSH が導入される前は、Linux サーバー開発者の多...

小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...

CSS における px、rem、em、vh、vw の違いを簡単に分析します

絶対長さピクセルpx はピクセル値であり、メートルやセンチメートルのような固定の長さです。相対的な長...

WeChatアプレットのスクロールビューは、プルアップ時にデータの読み込みを重複させるソリューションを実装しています。

WeChat アプレットのスクロール ビューでは、プルアップして読み込むときにバグが多く発生します...

MySQL がデフォルトの分離レベルとして繰り返し読み取りを選択する理由

目次Oracle 分離​​レベルMySQL 分離レベル要約する多くの読者は、MySQL のトランザク...

Centos サーバーで nginx を設定する方法の例

セキュアターミナルMobaXterm_Personalをダウンロードまず、安全なターミナルをダウンロ...

MySQLでデータをエクスポートするいくつかの方法の詳細な説明

MySQL データをエクスポートする目的は、データベースのバックアップ、テーブル構造のエクスポート、...

数十行のjsを使用してクールなキャンバスインタラクティブ効果を実現する方法を教えます

目次1. 円を描く2. マウスで動かした円3. マウスでドラッグした粒子4. カラーグラデーション粒...

Vue フロントエンドと Django バックエンドを使用して、一定期間内のデータをクエリする方法

序文開発プロセスでは、すべてのデータではなく特定の期間内のデータをクエリするなど、クエリのフィルタリ...