レイアウト・構造
フルブリード
読み幅を制限した記事の中で、1つの帯だけを枠の端から端まで広げる全幅ブレイクアウト。本文は狭く、写真や引用だけを大きく見せる型。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
実装メモ
3カラムグリッド（1fr / 読み幅 / 1fr）で本文は中央トラックに置き、全幅にしたい要素だけ grid-column:1 / -1 で全トラックへ広げる手法です。負のマージンや 100vw を使わず、親要素の内側で完結します。
コード（コピーして使えます）
<div class="stage">
<article class="article">
<h2 class="a-title">全幅ブレイクアウト</h2>
<p class="a-text">本文は読みやすい幅に制限したまま、途中の帯だけを枠いっぱいへ広げられます。</p>
<figure class="a-bleed" role="img" aria-label="全幅のビジュアル帯">
<figcaption>edge-to-edge</figcaption>
</figure>
<p class="a-text">帯の下は、また元の読み幅へ戻ります。写真・引用・数値の強調に向く構図です。</p>
</article>
</div>