序文大規模なフロントエンドの開発に伴い、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 選択タグにおける単一選択と複数選択の詳細な説明
システム環境はserver2012です1. MySQLの解凍バージョンをダウンロードし、インストール...
序文以前、画像とテキストの垂直方向のずれの問題について説明しました。ここで示した小さな例では、小さな...
序文:ルートでは、主要部分は同じでも、基礎となる構造が異なることがあります。たとえば、ホームページに...
1. MySQLデータベースを作成する1. データベース構文を作成する --「testdb」という名...
証明書チェーンを生成するスクリプトを使用して、ルート証明書、中間証明書、および 3 つのクライアント...
mysqlに接続できない問題の解決方法を参考までに紹介します。具体的な内容は以下のとおりです。昨日は...
この記事の例では、テーブルを動的に生成するjsの具体的なコードを参考までに共有しています。具体的な内...
リストスタイルのプロパティHTMLには、順序なしリストと順序ありリストの2種類のリストがあります。仕...
以下に記録されているように、WIN10システムにMYSQLをダウンロードしてインストールするための詳...
目次Promise の基本的な使用法: 1. Promiseオブジェクトを作成する2. プロミス方式...
概要:市販されているいくつかのタイムテーブルソフトウェアから教訓を得ました。機能が複雑すぎるため、タ...
開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...
この場合、transition という単語を間違って書いたため、午後中ずっとそれに取り組みました。本...
目次Axios リクエストQs処理データ分析Vantアップロードファイル形式完全なコードこの記事では...
先週、先生が私に数字当てゲームをするちょっとした宿題を出しました。とても面白いと思ったので、適当に書...