divの中の子要素だけを画面幅最大にする方法【CSS】

HTML/CSS

今回はCSSを使ってdiv内の子要素をdiv内に残したまま画面幅いっぱいに広げる方法を紹介します。

セオリー通りに考えると、通常div内にある子要素はdivにかかったCSSの外には出れないはずです。

しかしdiv内に入った一部の画像や背景を画面幅いっぱいにしてレイアウトに強弱を付けたいと思うことはたくさんあります。その度にdiv要素の外に出し、レイアウトを微調整して、ってなるとめんどくさいですし意外と上手くいかないです。。。

そんな場合は今回紹介する技を使えば、最も簡単にdiv内の要素を幅いっぱいにする事出来ますので覚えてみて下さい。

子要素だけを画面幅いっぱいにする

divの中の要素を画面幅いっぱいにするにはcalc関数を利用します。

calc関数

calc関数を使用する事で、特定のCSSプロパティの値を指定する際に演算子を利用して計算が可能になります。

使い方は以下の様な感じです。これにより複雑な調整が可能になります。

例）
width: calc(10px + 100px);
width: calc(100% – 30px);
width: calc(2em * 5);
width: calc(var(–variable-width) + 20px);

以下は、div内（inner内）にdivを入れ子にしたよくあるコーディングのパターンです。

<div class="inner">
   <div class="full">これを画面幅いっぱいにしたい</div>
   <div class="body">これはインナーの幅</div>
</div>
body {
  background: #aaa;
}

.inner {
  width: 520px;
  max-width: 100%;
  margin: 0 auto;
  background: #eee;
}

.full {
  background: #26a626;
  padding: 8px 14px;
}

.body {
  padding: 8px 14px;
  margin-top: 12px;
}

見た目は以下の様にdiv（.inner）の大きさの範囲内に子要素のdivが入ります。

div（.inner）の幅は一切変えずに子要素を幅いっぱいにするには.fullに以下のスタイルを追加する事で可能です。

  margin: 0 calc(50% - 50vw);
  width: 100vw;

width: 100vw;は画面幅に対して最大までの幅にしてくれます。

ちなみにwidth: 100%は親要素に対して相対的に指定しているのに対して、100vwはウィンドウサイズに対してです。

margin: 0 calc(50% – 50vw)は、margin-left: 50%;とmargin-left: -50vw;と同じ状態です。

つまり親要素の半分の幅だけずらして、画面の半分の幅だけ戻すということをしています。

背景だけを画面幅最大にしたい場合

背景だけを画面幅最大にしたい場合は以下の様にpaddingの調整をします。

background: #26a626;
padding: 8px calc(50vw - 50% + 8px);
margin: 0 calc(50% - 50vw);
width: 100vw;

考え的にはmarginの逆の値をpaddingを付けるって感じです。後は若干の微調整をプラスして調整します。

以上が「divの中の子要素だけを画面幅最大にする方法【CSS】」でした。
WEB制作で非常に使える技なので是非活用してみて下さい。

2020年9月12日HTML/CSSCSS,WEB

Posted by KT