コンテンツの幅について、ブラウザの画面幅いっぱいではなく、1100pxなど一定にすることはよくあると思います。ただ、その中で画像など一部の要素のみブラウザの画面幅いっぱいにしたいこともあります。そういったときに、わざわざいったんコンテナを閉じなくてもやれる方法を自分用のメモ(コピペ用)で残します。

ちなみにアイキャッチ画像に関しては、たまにはシュールな感じも面白いかなと思っただけです。

親要素の幅を超えてブラウザの画面幅いっぱいにするCSS

コード

.element {
   margin: 0 calc(50% - 50vw);
   width: 100vw;
}

解説

左右の両端から、marginについてまず50%取ることで、画面の中央までmarginが取られることになります。つまりその時点では幅が0。そこから50vw戻すことによって、marginがブラウザの画面の端から0となるという仕組みです。

元の幅に戻す

上記の記述で幅いっぱいにした状態から、元の幅に戻すときは次の記述です。

.element {
   padding: 0 calc(50vw - 50%);
}

注意点

width: 100vw自体に注意点があり、スクロールバーを含むので、スクロールが発生する状態だと、横スクロールが発生してしまいます。それを避けるため、overflow-x: hiddenの記述が必要となります。

まとめ

親要素を超えてブラウザの画面幅いっぱいに要素を配置するCSSをご説明しました。コピペしやすいサイトを知らなかったので、自分用ですが、他の方もこのページ使ってコピペしていただけるなら幸いです。

著者のイメージ画像

BringFlower|稲田 高洋

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。