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

推薦する

Windows 環境での MySQL の解凍、インストール、バックアップ、復元

システム環境はserver2012です1. MySQLの解凍バージョンをダウンロードし、インストール...

モバイルデバイス上のぼやけた小さなアイコンの問題を解決する方法

序文以前、画像とテキストの垂直方向のずれの問題について説明しました。ここで示した小さな例では、小さな...

vue.js ルーターのネストされたルート

序文:ルートでは、主要部分は同じでも、基礎となる構造が異なることがあります。たとえば、ホームページに...

mysql データベースの作成、ユーザーの追加、ユーザー認証の実用的な方法

1. MySQLデータベースを作成する1. データベース構文を作成する --「testdb」という名...

nginx プロキシ サーバーで双方向証明書検証を構成する方法

証明書チェーンを生成するスクリプトを使用して、ルート証明書、中間証明書、および 3 つのクライアント...

MySQL サーバー 5.5 の接続失敗の解決策

mysqlに接続できない問題の解決方法を参考までに紹介します。具体的な内容は以下のとおりです。昨日は...

jsは動的にテーブルを生成します(ノード操作)

この記事の例では、テーブルを動的に生成するjsの具体的なコードを参考までに共有しています。具体的な内...

CSS でリスト スタイル属性を設定する方法 (この記事を読むだけ)

リストスタイルのプロパティHTMLには、順序なしリストと順序ありリストの2種類のリストがあります。仕...

MySQL 5.7.19 のインストールと設定方法のグラフィック チュートリアル (win10)

以下に記録されているように、WIN10システムにMYSQLをダウンロードしてインストールするための詳...

JavaScript における Promise の詳細な説明

目次Promise の基本的な使用法: 1. Promiseオブジェクトを作成する2. プロミス方式...

JSはカリキュラムタイムテーブルアプレット(スーパーカリキュラムタイムテーブルを模倣)を実装し、カスタムバックグラウンド機能を追加します

概要:市販されているいくつかのタイムテーブルソフトウェアから教訓を得ました。機能が複雑すぎるため、タ...

html、xhtml、xmlの違い

開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...

CSS3は、変換変形とイベントを組み合わせて扇形のナビゲーションを完成させます。

この場合、transition という単語を間違って書いたため、午後中ずっとそれに取り組みました。本...

写真をアップロードして顔を認識する Vue+axios サンプルコード

目次Axios リクエストQs処理データ分析Vantアップロードファイル形式完全なコードこの記事では...

js を使用して数字推測ゲームを実装する

先週、先生が私に数字当てゲームをするちょっとした宿題を出しました。とても面白いと思ったので、適当に書...