フルブリードセクション

解説

フルブリードセクションは、本文は読みやすい幅に収めたまま、画像や帯だけを画面の左右いっぱいまで広げる手法です。横幅 100vw をビューポート全幅に取り、margin-left:calc(50% - 50vw) で要素を親の左端基準から画面の左端まで引き戻すことで、コンテナの制約を超えて全幅に展開します。本文の前後はそのままの幅で続くため、読みやすさと迫力を両立できます。

使う場面

• 記事中で大きなビジュアルや図版を全幅で見せたいとき
• 引用やバナー、動画埋め込みを目立たせたいとき
• ランディングページで途中に全幅の区切り帯を入れたいとき

全幅にしたい要素にだけ fb__w のスタイルを当てるのが基本で、本文は max-width で読みやすい幅を保ちます。高さや背景はその要素のCSSで自由に変えられます。100vw はスクロールバーの幅を含むため、環境によってはわずかに横スクロールが出ることがあります。気になる場合は親に overflow-x:hidden を付けると安全です。

使用例・適したシーン

• LP のファーストビュー
• サービストップの導入
• コーポレートサイトのトップ