未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【CSS】親要素よりも子要素の幅を広げる方法

本記事では、CSSを使って親要素よりも子要素の幅を広げる方法について解説します。

このテクニックを覚えることで、わざわざ親要素から外して幅を指定する必要がなくなりコードがシンプルで見やすくなります。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

作成者たにぐち まこと
学習時間9時間
受講者数42,075人
レビュー (8,925件)

完成形を確認しよう

完成形の形を見ることで理解しやすくなるので、実際に親要素よりも子要素の幅を広げた実行結果を一度確認しましょう。

HTMLとCSSでサンプルコードを作成する

HTMLとCSSを使って、子要素の幅を広げるためのサンプルコードを作成します。このサンプルコードは以降の解説で使用します。

HTML
<div class="sample">
  <p>親要素</p>
  <div class="sample__content">
    <p>子要素</p>
  </div>
  <p>親要素</p>
</div>
CSS
.sample{
  max-width:500px;
  margin:0 auto;
  background:#000;
  color:#fff;
  text-align:center;
}

.sample__content{
  background:#00f;
}

サンプルコードを適用させた表示は以下のとおりです。

親要素内にある子要素

親要素よりも子要素の幅を広げるCSSの書き方

作成したサンプルコードの.sample__contentに以下のCSSを適用させます。

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

すると、子要素の幅が画面いっぱいに表示されていることが確認できます。

子要素の幅がウィンドウサイズぴったり

親要素よりも子要素の幅を広げるには「width:100vw」と「margin:0 calc(50% – 50vw)」の2つを適用させれば良いのです。とても簡単ですね。

では、何故この2つのCSSを適用させると子要素の幅が画面いっぱいに広がるのか、その理由について解説していきます。

width:100vw

vwという値を初めて知ったという人のために軽く説明すると、vwとはビューポート(ウィンドウサイズ)の幅を表し1vwでウィンドウサイズの1%の大きさになります。

つまり今回指定している100vwとは、ウィンドウサイズいっぱいの値ということになります。

width:100vwのみを指定した場合の表示は以下の通りです。

100vwを適用させた子要素

見た目はウィンドウサイズの半分しか子要素の幅がないように見えますが、ウィンドウの右側に表示しきれない幅(50vw – 親要素の幅)が突き出ています。

margin:0 calc(50% – 50vw)

ここは少しイメージが付きにくいポイントなので、50%と50vwの値を設定する理由について解説します。

まず始めに50%ですが、これは親要素の50%(半分)の幅をずらすために指定します。

50%を適用させた子要素

親要素の50%の幅をずらしたことで、丁度子要素の幅がウィンドウサイズの半分になりました。ここで、50vw分の幅を引いてあげることにより、右側にずれていた子要素がウィンドウの右側ぴったりにハマります。

子要素の幅がウィンドウサイズぴったり

つまり、margin:0 calc(50% – 50vw)では、width:100vwを適用した時に右側にずれているものをウィンドウサイズに丁度収まるように調整しています。

子要素の幅を画面いっぱいではなく固定値にしたい場合

今までの説明は子要素の幅をウィンドウサイズいっぱいに広げる方法でしたが、子要素の幅を固定値にしたい場合の設定方法についても解説します。

CSS
.sample__content{
  max-width:600px;
  margin:0 -50px;
}

ここでのポイントは、親要素の幅と子要素の幅の差を見ることです。

今回の例では、親要素の幅が500pxで子要素の幅を600pxに設定しました。この場合、親要素と子要素の幅の差100pxを2で割りmarginの左右に指定します。