フルブリード
読み幅を制限した記事の中で、1つの帯だけを枠の端から端まで広げる全幅ブレイクアウト。本文は狭く、写真や引用だけを大きく見せる型。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- 読み幅を絞った記事の中で写真や引用だけを全幅にする
- 負のマージンや 100vw を使わずに帯を広げたいとき
- 数値や図の強調ブロック
- 避ける場面
- 全ブロックを全幅にしたいページ（読み幅の意味が消える）
- 親要素に overflow:hidden を付けられない場合
- 構成要素
- 記事コンテナ
- 本文（中央トラック）
- 全幅の帯
- キャプション
- 持っている状態
- 通常
- キーボード
操作要素なし（静的な配置）。記事内のリンク側でフォーカス移動を確保する
- 支援技術
帯は figure＋figcaption で名前（edge-to-edge）を持つ。本文→帯→本文の順に読まれ、幅の変化は読み上げに影響しない
- 動き
なし
デザインの要点
- 3 列グリッド（1fr / 読み幅 / 1fr）で本文を中央列に置き、帯だけ grid-column: 1 / -1 で全列に広げる
- 負のマージンや 100vw を使わない。スクロールバー幅ぶんの横あふれや、親の overflow 設定に依存しない
- 読み幅は min(280px, calc(100% - 40px))。狭い枠でも左右 20px の余白が残り、帯との幅の差が見える
実装メモ
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">
<figcaption>edge-to-edge</figcaption>
</figure>
<p class="a-text">帯の下は、また元の読み幅へ戻ります。写真・引用・数値の強調に向く構図です。</p>
</article>
</div>