layout

1-2. ボックスモデルとレイアウトモード

ページレイアウト

Page layout - Wikipedia

レイアウト(ブロック整形コンテキスト, ボックスモデル, 包含ブロック (en-US), レイアウトモード, マージンの相殺, 置換要素, 重ね合わせコンテキスト, 視覚書式設定モデル (en-US))

ボックスモデル > ページレイアウト

ページレイアウト

ページレイアウトの話　flex grid mult display position sticky
ページレイアウト

 - 固定幅レイアウト px
 - リキッドレイアウト %? 2000年～　HTMLのテーブルベースのレイアウトやグリッドベースのデザインに代わるものとして
 - レスポンシブレイアウト mediaquery RWD　レスポンシブWebデザインはより新しいアプローチで、CSS3をベースに、CSSの@mediaルールの使用を強化することで、ページのスタイルシート内でより深いレベルでのデバイスごとの指定を可能にしています。2018年3月、Googleはモバイルファーストインデックスを導入することを発表しました[12]。 レスポンシブデザインを採用しているサイトは、この新しいアプローチを確実に満たすことができます。
	
最も普及しているブラウザのウィンドウ
現在最も普及している画面解像度
現在最も普及しているモニターサイズ
					

ビジュアルフォーマッティングモデル

視覚整形モデル(Visual formatting model)

CSS の視覚整形モデル (Visual Formatting Model) は、ユーザーエージェントが文書ツリーをどのように受け取り、視覚メディア用に処理して表示するかを説明するものです。これには、コンピューター画面のような連続メディアと、ブラウザーの印刷機能によって印刷された本や文書のようなページ付きメディアが含まれます。情報の大部分は、連続メディアとページ付きメディアに等しく適用されます。

https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout

CSSのレイアウトモード(または単にレイアウト)は、ボックスの位置やサイズを、兄弟要素や祖先要素のボックスとの相互作用を踏まえて決めるアルゴリズムのこと。複数のレイアウトモードがある。

レイアウトモード

レイアウトモード(単にレイアウト)

• 通常フロー　CSS フローレイアウト
• 表レイアウト　CSS 表
• 位置指定レイアウト　CSS 位置指定レイアウト
• 段組みレイアウト　CSS 段組みレイアウト
• フレックスボックスレイアウト　CSS フレックスボックスレイアウト
• グリッドレイアウト　CSS グリッドレイアウト

marginの性質

Webレイアウト　レスポンシブWebデザイン

visibility

					visibility: hidden;
				

display

					display: inline-block;
				

flexbox

flex ショートハンド

			flex-grow
			flex-shrink
			flex-basis
				

					flex: 1 30px;
				

display: grid;

grid ショートハンド

明示的なすべてのグリッドプロパティ (grid-template-rows (en-US), grid-template-columns, grid-template-areas) と、暗黙のすべてのグリッドプロパティ (grid-auto-rows (en-US), grid-auto-columns (en-US), grid-auto-flow (en-US)) を単一の宣言で設定します。

					grid: auto-flow dense / 40px 40px 1fr;
				

flexboxまたはgrid

flexboxとgrid

align-content, align-items, align-self

					align-content: space-around;
										
					align-items: stretch;
					
					align-self: start;
				

justify-content, justify-items, justify-self

					justify-content: center;
					
					justify-items: stretch;
					
					justify-self: stretch;
				

place-content, place-items, place-self

					place-content: end space-between;
					
					place-items: center stretch;
					
					place-self: stretch center;
				

order

					order: -1;
				

カラムレイアウト

column-rule ショートハンド

これは一括指定プロパティであり、一回の便利な宣言で個別の column-rule-* プロパティ (column-rule-width, column-rule-style, column-rule-color) を設定できます。

					column-rule: solid 8px;
				

column

column-count, column-fill, columns, column-span, column-width

					column-count: 3;
					
					column-fill: balance-all;
					
					columns: 6rem auto;
					
					column-span: all;
					
					column-width: 120px;