序文大規模なフロントエンドの開発に伴い、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 ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...
MySQL ストアド プロシージャ パラメータには、in、out、inout の 3 種類があります...
1.1 ストレージエンジンの概要 1.1.1 ファイルシステムストレージファイル システム: オペ...
CSS のモジュール ソリューションは、JS のモジュール ソリューションと同じくらい多く存在すると...
setinterval を使用すると、ページを開いた直後に 1 秒の遅延後に実行されることがわかりま...
スライドショーは Web ページでよく見られます。美しい写真が使われています。こちらは純粋な CSS...
過去に別れを告げるvscode にリモート SSH が導入される前は、Linux サーバー開発者の多...
多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...
絶対長さピクセルpx はピクセル値であり、メートルやセンチメートルのような固定の長さです。相対的な長...
WeChat アプレットのスクロール ビューでは、プルアップして読み込むときにバグが多く発生します...
目次Oracle 分離レベルMySQL 分離レベル要約する多くの読者は、MySQL のトランザク...
セキュアターミナルMobaXterm_Personalをダウンロードまず、安全なターミナルをダウンロ...
MySQL データをエクスポートする目的は、データベースのバックアップ、テーブル構造のエクスポート、...
目次1. 円を描く2. マウスで動かした円3. マウスでドラッグした粒子4. カラーグラデーション粒...
序文開発プロセスでは、すべてのデータではなく特定の期間内のデータをクエリするなど、クエリのフィルタリ...