HTML&CSS

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

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

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

コード

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

解説

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

元の幅に戻す

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

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

親要素の幅は無視して左右に固定の余白を設定する

例えば、親要素のコンテナが左右に20pxの余白を設けているのに対して、特定の要素だけ15pxにしたい、というような場合は次の記述で可能です。

widthについて、100vwよりも20px幅を縮めています。それだけだと左側に寄ってしまうのですが、marginの左右をcalc(50% – 50vw + 10px)とすることで、うまくいきます。

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

注意点

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

まとめ

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

著者のイメージ画像

株式会社BringFlower
稲田 高洋(Takahiro Inada)

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