コンテンツエリアのレイアウト設計

@import '../_typography.css';

:root{
	--gutter-size: var(--s--30);
	--flow--base: var(--s--30);
}

/* コンテンツの両端の余白 */
.has--gutter {
	padding-inline: var(--gutter-size);
}

/* コンテンツ幅の制御 */
.is--wrapper {
	--contentSize: 50rem;
}
.is--wrapper > * {
	--max-sz: var(--contentSize, 100%);
	max-inline-size: min(100%, var(--contentSize)); /* min ないとimg要素等がはみ出すことがある */
	margin-inline: auto;
}

/* コンテンツ間の余白 */
.l--flow > * + * {
	--flow: var(--flow--base);
	margin-block-start: var(--flow);
}

/* 見出しの上部の余白は広くする. */
.l--flow > :where(h1, h2, h3, h4, h5, h6) {
	margin-block-start: calc(var(--flow) * 2);
}

.l--flow > :first-child {
	margin-block-start: 0px;
}

/* その他 - コンテンツエリア上下の余白 */
main{
	padding-block: var(--s--40);
}

<main class="is--wrapper">
	<article class="l--flow has--gutter">
		<p>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</p>
		<p>
			ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
		</p>
		<h2>見出し2のテキスト</h2>
		<p>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</p>
		<p>
			ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
		</p>
		<h3>見出し3のテキスト</h3>
		<p>
			ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような
			Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。
		</p>
		<h2>見出し2のテキスト</h2>
		<p>
			ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
		</p>
		<p>
			ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような
			Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。
		</p>
	</article>
</main>

/* 直前のデモと同じスタイルを読み込む */
@import '../demo/_src.css';


/* スクロールバーを除いたウインドウサイズを保持するためのプロパティ */
@property --fullwide-width {
	syntax: '<length-percentage>';
	initial-value: 100cqw;
	inherits: true;
}

/* コンテナ定義 */
.is--container{
	container-type: inline-size;
}
.is--container > * {
	/* コンテナサイズをセット */
	--fullwide-width: 100cqw;
}
.is--container.has--gutter > * {
	/* 左右に余白がある場合はそれを考慮してセット */
	--fullwide-width: calc(100cqw + var(--gutter-size) * 2);
}

/* コンテンツエリア自体に幅を指定する */
article{
	max-width: 50rem;
	margin-inline: auto;

	/* デモ用ガイドライン */
	border: dashed 1px #ccc;
}

/* 全幅コンテンツ */
.fullwide{
	/* 左右に飛び出す */
	max-width: var(--fullwide-width);
	margin-inline: calc(50% - calc(var(--fullwide-width) / 2));

	/* デモ用ガイド装飾 */
	padding: 1.5em;
	border: solid 2px;
	background-color: rgba(0, 100, 200, 0.2);
}


/* 以下、デモ用ダミーコンテンツ */
._dummybox_{
	background-color: rgb(240, 240, 240);
	padding: 4em 2em;
	text-align: center;
}

<main class="is--container has--gutter">
	<article class="l--flow">
		<p class="_dummybox_">...contents...</p>
		<div class="fullwide">全幅コンテンツ (cqw)</div>
		<p class="_dummybox_">...contents...</p>
		<p class="_dummybox_">...contents...</p>
		<p class="_dummybox_">...contents...</p>
		<p class="_dummybox_">...contents...</p>
		<p class="_dummybox_">...contents...</p>
		<p class="_dummybox_">...contents...</p>
</main>