子要素を親要素(インナー幅)からはみ出させて、画面いっぱいに表示したり、
片側だけ画面いっぱいに表示する方法を学びました。
実装方法は色々あると思いますが、今回はcalc関数を使って実装する方法と注意点を書いていきます。
2024年01月22日追記
違うやり方で実装する方法を記事にしました↓
今回のポイント
先に今回のポイントを書きます。
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
の指定
width:100vw
は横幅を画面幅(ウィンドウサイズ)いっぱいにするための指定です。
単位は%ではなく、vwなので注意してください。
今回の場合、画面幅が1000pxなので、子要素の幅も1000pxです!
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:-50vw;
の指定
margin-left:-50vw
の指定で、画面幅の半分の幅だけ右に戻しています。
解説の条件で画面幅を1000pxと設定したので、
画面幅の半分500pxを右に戻しています。
margin-left:-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;の対応状況↓
スクロールバーが表示されている状態
スクロールバーが表示されている状態とは、Windowsで閲覧している場合や、Macの設定で「システム環境設定 > 一般」の「スクロールバーの表示」のところを「常に表示」にチェックを入れている場合です。
スクロールをなめらかにする
最後に、main
要素に-webkit-overflow-scrolling: touch;
と指定している部分について解説します。
iOS環境で、ページ全体をスクロールする時は問題ないですが、要素内でスクロールする時にカクカクしていたらしく、スクロールをなめらかにするための指定です。
ただ、現在はデフォルトでなめらかなスクロールになるようになっているので不要です。
詳しくはこちら↓
まとめ
画面いっぱいにはみ出すレイアウトがあれば、今回の記事を参考に実装していきたいと思います。
最後まで読んでいただきありがとうございました!!
コリスさんの記事で、border-imageを使ったやり方が紹介されています↓
参考サイト
参考にさせていただいたサイト一覧↓