【CSS】子要素を親要素からはみ出して画面いっぱいに表示する
【CSS】子要素を親要素からはみ出して画面いっぱいに表示する 2025 1/26 CSS 2022年3月28日2025年1月26日- URLをコピーしました！
子要素を親要素(インナー幅)からはみ出させて、画面いっぱいに表示したり、片側だけ画面いっぱいに表示する方法を学びました。
実装方法は色々あると思いますが、今回はcalc関数を使って実装する方法と注意点を書いていきます。
2025年01月26日追記違うやり方で実装する方法を記事にしました↓
【CSS】@propertyとコンテナクエリを組み合わせて子要素を親要素からはみ出して画面幅いっぱいに表示する 目次今回のポイント
先に今回のポイントを書きます。
- width:100vwと左右どちらかもしくは両方のmarginにcacl(50% - 50vw)指定
- vwはスクロールバーの幅も含むため、横スクロールに注意
以下より詳しく書いていきます↓
完成サンプルとコード
今回実装するサンプルとコードを書いていきます。
コードに関して、画面幅いっぱいにするためや注意点を記述している行には、ハイライト表示させています。
完成サンプルCodeSandBoxを使って、サンプルを作成しました↓
HTML抜粋したHTML↓
<div class="l-container"> <section class="p-content"> <div class="p-content__inner" data-direction="column"> <div class="p-content__header"> <h2 class="p-content__title">画面幅いっぱい</h3> </div> <!-- /.p-content__header --> <div class="p-content__body " data-overDirection="full"> <p class="p-content__text">画面幅いっぱいに表示</p> </div> <!-- /.p-content__body --> </div> <!-- /.p-content__inner --> </section> <!-- /.p-content --> </div> <!-- /.l-container --> CSS抜粋したCSS↓
/* =============================================================== インナー幅:1000px =================================================================*/ .l-container { max-width: 1000px; width:95%; margin: 6rem auto; border: 2px solid #333; padding: 3rem; } /* ===================================================== 子要素を画面幅いっぱいにするためのCSS =======================================================*/ /* 画面幅いっぱいに表示 */ .p-content__body[data-overDirection~="full"] { width: 100vw; margin: 0 calc(50% - 50vw); } /* 左側いっぱいに表示 */ .p-content__body[data-overDirection~="left"] { width: 100vw; margin-left: calc(50% - 50vw); } /* 右側いっぱいに表示 */ .p-content__body[data-overDirection~="right"] { width: 100vw; margin-right: calc(50% - 50vw); }画面幅いっぱいにする方法の解説
画面幅いっぱいにする方法を解説していきます。
結論画面いっぱいに表示させたい子要素に
width:100vwと、左右どちらかもしくは両方のmarginにcalc(50% – 50vw)
で実装できます！
以下の条件を前提として、なぜこれで実装できるのか解説していきます。
- 画面幅：1000px
- インナー幅：500px
width:100vwは横幅を画面幅(ウィンドウサイズ)いっぱいにするための指定です。
単位は%ではなく、vwなので注意してください。
今回の場合、画面幅が1000pxなので、子要素の幅も1000pxです！
width:100vwのみ指定した場合、以下のようになります↓
width:100vwのみ指定 margin: 0 calc(50% - 50vw)の指定「margin:0 calc(50% - 50vw)って、何してんねん！」と初めて見た時思いましたが、
これは、親要素の半分の幅だけずらしてから画面幅の半分の幅だけ戻すということをしています。
ちょっとイメージしづらいので、
margin-left:50%;とmargin-left:-50vwに分けて書いていきます。
margin-left:50%;の指定margin-left:50%の指定で、親要素の半分の幅を左にずらしています。
解説の条件でインナー幅:500pxと設定したので、
インナー幅の半分250pxを左にずらしています。
margin-left:50%を指定した場合、以下のようになります↓
margin-left:50%を指定 margin-left:-50vw;の指定margin-left:-50vwの指定で、画面幅の半分の幅だけ右に戻しています。
解説の条件で画面幅を1000pxと設定したので、
画面幅の半分500pxを右に戻しています。
margin-left:-50vwを指定した場合、以下のようになります↓
margin:-50vwの指定以上がmargin: 0 calc(50% - 50vw)の解説になります。
これを利用して画面いっぱいに表示したり、右 or 左側だけ画面いっぱいに表示することができます！
注意点
注意点をまとめました↓
横スクロールの対策注意点として、vwはスクロールバーの領域も含めた幅になります。
スクロールバーが表示されている状態で閲覧している場合、横スクロールが起きて表示が崩れます。
そのため、インナー幅を指定した要素より親または祖先の要素にoverflow-x:hidden;を指定する必要があります。
overflow:hidden;を指定している要素内についてposition:sticky;が機能しないため注意が必要です。overflow-x:hidden;のみ指定しても機能しません。overflow:hidden;を設定している要素内でコンテンツを固定して縦スクロールさせたい場合は、position:fixedとJavaScriptを使う必要があります。
ちなみに、overflow-y:hidden;を指定した要素内でposition:sticky;とleft:0;の固定横スクロールは機能します。
overflow:clip;を使う場合overflow:clip;を使えば、position:sticky;が機能するみたいです。しかし、Safari16以降でしか対応していないので注意が必要です。overflow:clip;の対応状況↓
あわせて読みたい “overflow:clip” | Can I use… Support tables for HTML5, CSS3, etc スクロールバーが表示されている状態スクロールバーが表示されている状態とは、Windowsで閲覧している場合や、Macの設定で「システム環境設定 > 一般」の「スクロールバーの表示」のところを「常に表示」にチェックを入れている場合です。
スクロールをなめらかにする最後に、main要素に-webkit-overflow-scrolling: touch;と指定している部分について解説します。
iOS環境で、ページ全体をスクロールする時は問題ないですが、要素内でスクロールする時にカクカクしていたらしく、スクロールをなめらかにするための指定です。ただ、現在はデフォルトでなめらかなスクロールになるようになっているので不要です。
詳しくはこちら↓
TECH LIBRARY 【CSS】overflow-scrolling: touchが不要になりました | Webデザイン・コーディングに役立つ、TECH LIBRARY TECH LIBRARYでは、WebデザインやHTML/CSSコーディングに役立つ情報を発信しています。トレンド情報から、便利なリンク集、意外と知られていない豆知識などをお届けします…まとめ
画面いっぱいにはみ出すレイアウトがあれば、今回の記事を参考に実装していきたいと思います。
最後まで読んでいただきありがとうございました！！
コリスさんの記事で、border-imageを使ったやり方が紹介されています↓
コリス CSSでこんなことができるの知ってた？ 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置… h1やpなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張…参考サイト
参考にさせていただいたサイト一覧↓
でざなり 【CSS】bodyタグにoverflow-x:hiddenが効かない原因と対処法 bodyにoverflow-x: hiddenをかけるとブラウザ表示では非表示にできましたが、スマホエミュで見ると全然非表示にされていませんでした（スマホ実機でも同じ）。というわけで… TECH LIBRARY 【CSS】overflow-scrolling: touchが不要になりました | Webデザイン・コーディングに役立つ、TECH LIBRARY TECH LIBRARYでは、WebデザインやHTML/CSSコーディングに役立つ情報を発信しています。トレンド情報から、便利なリンク集、意外と知られていない豆知識などをお届けします… (*x).b=z->a+y/c -webkit-overflow-scrolling 要らなくなってる : (*x).b=z->a+y/c ◆ -webkit-overflow-scrolling をつけると範囲外表示できないバグがあった◆ 今も直ってない◆ だけどなくてもデフォルトでなめらかにスクロールするから付ける必要がなくな… HPcode（えいちぴーこーど） 子要素を親要素（インナー幅）からはみ出して画面いっぱいにするCSS | HPcode（えいちぴーこーど） 子要素を親要素からはみ出して画面いっぱいにするは、今までであれば親要素から出してコーディングし直すというのが一般的でした。 ただし、今ではcalcとvwとい新たなCSSの… Lopan.jp コンテナからの解放。 横幅が決められた要素内の画像やセクションを、ウィンドウ幅いっぱいにはみ出して広げる、calc()関数を使った便利ワザ。 CSS html css Tips よかったらシェアしてね！- URLをコピーしました！
- URLをコピーしました！
- 【Tips】Flexboxを使ってテキスト量が異なるボタンの高さを揃える
- 【CSS】意外と知らなかったborder-radiusについて