CSS で 2 列レイアウトを実現する N 通りの方法

1. 2 列レイアウトとは何ですか?

2 列レイアウトには、左側が固定幅で右側が適応幅のレイアウトと、両方の列が適応型 (つまり、左側の幅は子要素によって決定され、残りのスペースは右側に埋められる) の 2 種類があります。 CSS面接でもよく聞かれる質問であり、フロントエンド開発エンジニアなら習得しておきたいスキルです。以下で実装方法を紹介します。

2. 左側の固定幅と右側の適応幅を実現するにはどうすればよいですか?

1. 二重インラインブロック

原則: 両方の要素を dislpay:inline-block に設定します。HTML スペースの影響を排除するために、親要素の font-size を 0 に設定し、右側の適応要素の幅を calc 関数を使用して計算する必要があります。 2 つの要素の高さが異なる場合は、vertical-align: top を設定して調整できます。

デメリット: 親要素のフォントサイズが0に設定されているため、子要素のテキストは表示されません。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<スタイル>
		   *{
			   パディング: 0;
			   マージン: 0;
		   }
			。箱{
				高さ: 600px;
				幅: 100%;
				フォントサイズ:0;
			}
			。左{
				表示: インラインブロック;
				幅: 100ピクセル;
				高さ: 200px;
				背景色: 赤;
				垂直方向の位置合わせ: 上;
				
			}
			。右{
				表示: インラインブロック;
				幅: calc(100% - 100px);
				高さ: 400px;
				背景色: 青;
				垂直方向の位置合わせ: 上;
			}
			
		</スタイル>
	</head>
	<本文>
		<div>
			<div>
				<span>1234</span>
			</div>
			<div>
				<span>1234</span>
			</div>
		</div>
	</本文>
</html>

2. ダブルフローティング

原則：2つの要素をフロートに設定し、右側の適応要素の幅をcalc関数を使用して計算します。

デメリット: 親要素のフロートをクリアする必要がある

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<スタイル>
			*{
				パディング: 0;
				マージン: 0;
			}
			。箱{
				高さ: 600px;
				幅: 100%;

			}
			。左{
				フロート: 左;
				幅: 100ピクセル;
				高さ: 200px;
				背景色: 赤;
			}
			。右{
				フロート: 左;
				幅: calc(100% - 100px);
				高さ: 400px;
				背景色: 青;
			}
		</スタイル>
	</head>
	<本文>
		<div>
			<div>
				<span>
					123だだだだだだだだだだだだだだだだだだだ
				</span>
			</div>
			<div></div>
		</div>
	</本文>
</html>

原則: 左側の固定幅要素はフロートし、右側の適応型要素は margin-left 値を固定幅要素の幅よりも大きく設定します。

デメリット: 親要素のフロートをクリアする必要がある

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<スタイル>
			*{
				パディング: 0;
				マージン: 0;
			}
			。箱{
				高さ: 600px;
				幅: 100%;

			}
			。左{
				フロート: 左;
				幅: 100ピクセル;
				高さ: 200px;
				背景色: 赤;
			}
			。右{
				左マージン: 100px;
				高さ: 400px;
				背景色: 青;
			}
		</スタイル>
	</head>
	<本文>
		<div>
			<div>
				<p>1234</p>
			</div>
			<div>
				<p>1234</p>
			</div>
		</div>
	</本文>
</html>

4. フローティング + BFC

原則: 親要素にoverflow:hiddenを設定し、左側の固定幅要素をフロートし、右側のアダプティブ要素にoverflow:autoを設定してBFCを作成します。

デメリット: 左の要素のコンテンツが設定された幅を超えると、右の要素と重なってしまいます。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<スタイル>
			*{
				パディング: 0;
				マージン: 0;
			}
			。箱{
				高さ: 600ピクセル;
				幅: 100%;
				オーバーフロー: 非表示;
			}
			。左{
				フロート: 左;
				幅: 100ピクセル;
				高さ: 200px;
				背景色: 赤;
			}
			。右{
				オーバーフロー:自動;
				高さ: 400px;
				背景色: 青;
			}
		</スタイル>
	</head>
	<本文>
		<div>
			<div>111111111111111111111111</div>
			<div>111111111111111111111111111111111111111111111</div>
		</div>
		<div></div>
	</本文>
</html>

5.絶対+左余白

原則：親要素は相対的に配置され、左側の要素は絶対的に配置され、右側の適応要素の margin-left の値は固定幅要素の幅よりも大きくなるように設定されます。

デメリット: 親要素が相対配置に設定されている

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<スタイル>
			*{
				パディング: 0;
				マージン: 0;
			}
			。箱{
				高さ: 600px;
				幅: 100%;
				位置: 相対的;
			}
			。左{
				位置: 絶対;
				幅: 100ピクセル;
				高さ: 200px;
				背景色: 赤;
			}
			。右{
				左マージン: 100px;
				高さ: 400px;
				背景色: 青;
			}
		</スタイル>
	</head>
	<本文>
		<div>
			<div></div>
			<div></div>
		</div>
	</本文>
</html>

6.フレックスレイアウト

原則: 親要素はdisplay: flexを設定し、アダプティブ要素はflex: 1を設定します。

デメリット: 互換性の問題があり、IE10以下ではサポートされていません

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<スタイル>
			*{
				パディング: 0;
				マージン: 0;
			}
			。箱{
				高さ: 600px;
				幅: 100%;
				ディスプレイ: フレックス;
			}
			。左{
				幅: 100ピクセル;
				高さ: 200px;
				背景色: 赤;
			}
			。右{
				フレックス: 1;
				高さ: 400px;
				背景色: 青;
			}
		</スタイル>
	</head>
	<本文>
		<div>
			<div></div>
			<div></div>
		</div>
	</本文>
</html>

3. 両側の要素は適応的である

厳密に言えば、どちらの要素も適応的ではありませんが、上記の固定幅は子要素によって拡張されるように変更されます。

1. フローティング + BFC

原理は上記と同じですが、左の要素の幅は設定されず、子要素によって拡張される点が異なります。

2. テーブルレイアウト

原則: 親要素は display:table で、左の要素は div で囲まれています。div は display:table-cell と width:0.1% (最小幅を確保するため) に設定されています。左の要素内に margin-right が設定され、右の要素に display:table-cell が設定されています。

デメリット: IE7 以下ではサポートされていません。display:table を使用すると、padding が無効になり、親要素の line-height プロパティが無効になり、display:table-cell を使用すると margin が無効になります。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<スタイル>
			。親{
				表示: テーブル;
				幅: 100%;
				
			}
			。箱{
				表示: テーブルセル;
				幅: 0.1%;
			}
			。左{
				右マージン: 20px;
				背景色: 赤;
				高さ: 200px;
			}    
			。右{
				表示: テーブルセル;
				背景色: 青;
				高さ: 300px;
			}
		</スタイル>
	</head>
	<本文>
		<div>
			<div>
				<div>126545453dddddddd453453453</div>
			</div>
			<div>12121</div>
		</div>
	</本文>
</html>

3.フレックスレイアウト

原理と欠点は上記のフレックスレイアウトと同じです。

4. グリッドレイアウト

原則: 親要素は display: grid、grid-template-columns: auto 1fr; を設定します (この属性は列の幅を定義します。auto キーワードは、ブラウザーが長さを独自に決定することを意味します。fr は相対的なサイズ単位で、残りのスペースが均等に分割されることを示します) grid-gap: 20px (行間隔)

デメリット: 互換性が低い、IE11 はサポートしていない、Google 57 以上のみサポート可能

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<スタイル>
			。親{
				表示:グリッド;
				グリッドテンプレート列:自動 1fr;
				グリッドギャップ:20px
			}  
			。左{
				背景色: 赤;
				高さ: 200px;
			}
			。右{
				高さ:300px;
				背景色: 青;
			}
		</スタイル>
	</head>
	<本文>
		<div>
			<div>111111111111111111111111</div>
			<div></div>
		</div>
	</本文>
</html>

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

<<: HTML+CSS+JSはナビゲーションバーのスクロールグラデーション効果を実現します

>>: HTML と JavaScript を使用してローカルメディア (ビデオとオーディオ) ファイルを再生する方法