これは通常のコンテンツ幅のテキストです。読みやすい行長に制限されています。
📸 フルブリード画像 — ビューポート全幅に広がります
テキストコンテンツは再び中央の狭い幅に戻ります。フルブリードは視覚的なアクセントとして効果的です。
「優れたデザインは、余白によって語られる。」
通常のコンテンツが続きます。breakout要素は少し広めの幅で表示されます。
フルブリードレイアウト Full Bleed
コンテンツ幅を超えてビューポート全幅に広がる要素を含むレイアウト。
ライブデモ
ソースコード
<article class="demo-fullbleed">
<p class="demo-fb-text">これは通常のコンテンツ幅のテキストです。読みやすい行長に制限されています。</p>
<div class="demo-fb-wide">
<div class="demo-fb-image">
📸 フルブリード画像 — ビューポート全幅に広がります
</div>
</div>
<p class="demo-fb-text">テキストコンテンツは再び中央の狭い幅に戻ります。フルブリードは視覚的なアクセントとして効果的です。</p>
<blockquote class="demo-fb-breakout">
「優れたデザインは、余白によって語られる。」
</blockquote>
<p class="demo-fb-text">通常のコンテンツが続きます。breakout要素は少し広めの幅で表示されます。</p>
</article>.demo-fullbleed {
display: grid;
grid-template-columns:
1fr min(65ch, 100% - 32px) 1fr;
}
.demo-fullbleed > * {
grid-column: 2;
}
.demo-fb-wide {
grid-column: 1 / -1;
}
.demo-fb-breakout {
grid-column: 1 / -1;
max-width: 85%; margin-left: auto; margin-right: auto;
padding: 20px 24px; border-left: 4px solid var(--ui-primary);
background: color-mix(in srgb, var(--ui-primary) 5%, #fff);
font-style: italic; font-size: 16px; color: #555;
border-radius: 0 8px 8px 0; margin-top: 16px; margin-bottom: 16px;
}
.demo-fb-text {
font-size: 14px; color: #444; line-height: 1.7;
margin: 8px 0;
}
.demo-fb-image {
background: linear-gradient(135deg,
color-mix(in srgb, var(--ui-primary) 12%, #fff),
color-mix(in srgb, var(--ui-primary) 25%, #fff));
padding: 32px; text-align: center; font-size: 14px;
color: var(--ui-primary); font-weight: 600;
margin: 16px 0;
}AIプロンプト
Basic
フルブリードレイアウトをCSS Gridで作ってください。記事本文は狭い幅で、画像はビューポート全幅に広がります。
Custom
以下の仕様でフルブリードレイアウトを実装してください。 - CSS Gridの3カラム手法（1fr min(65ch, calc(100% - 2rem)) 1fr） - 通常幅・ワイド幅・フルブリード幅の3段階 - プライマリカラー: #2563eb - フルブリード画像とbreakout引用ブロック - 滑らかなスクロールアニメーション - タイポグラフィの最適化（行長制御）
Advanced
アクセシビリティ対応のフルブリードレイアウトを実装してください。 - article要素でセマンティックな記事構造 - フルブリード画像のalt属性とfigcaption - ハイコントラストモードでボーダーが明確に - prefers-reduced-motion対応 - print用スタイル（フルブリードを通常幅に） - 画像のloading="lazy"とdecoding="async" - CLS（レイアウトシフト）防止のアスペクト比指定 - テキスト行長の最適化（45-75文字/行）