【CSS】親要素からはみ出して子要素を画面いっぱいにする

あわせて読みたい

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！ Webデザインを学びたいけど、どのスクールがいいのか分からない… スクール終了後のキャリアも不安 そんな悩み、ありませんか？ 特に未経験からスタートする方にとっては…

親要素の幅がすでに決まっている場合に、「ここだけは画面いっぱいに表示したい」と思った時に皆さんはどうしますか？

私は以前まではいちいち親要素から出すというコーディングをしていました。

自分でコーディングしているならそれで良いですが、CMSで決められた親要素の中でしか記述できない場合は、そもそも親要素から出すことができません。

ところが、便利なCSSのcalcとvwを使うと親要素の幅からはみ出して子要素の幅を画面いっぱいにすることができます。

完成したコード

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説5 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

ベースのコード

HTML

<div class="parent">
  <div>親要素の幅500px</div>
  <div class="fullwidth">この子要素を画面いっぱいにしたい</div>
</div>

シンプルに親要素parentがあって、その中に子要素fullwidthがあります。このfullwidthを親要素の幅からはみ出して画面いっぱいにしていきます。

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}

.parent{
  background: #eee;
  height: 500px;
  margin: 0 auto;
  padding: 10px;
  width: 500px;
}

.fullwidth{
  background: #7f31d6;
  color: #fff;
  padding: 10px;
}

最初の5行目まではブラウザのデフォルトスタイルをリセットしています。

今回は親要素parentの幅は500pxにします。画面いっぱいにしたい子要素fullwidthは現状では装飾のスタイルを指定しただけの状態です。

ここまでの結果。

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

当然ですが、親要素の中に収まってます。

子要素を画面と同じ幅にする

ここで今回のポイント1つ目のvwが登場します。先ほどまでは親要素の中に収まっていた子要素fullwidthですが、CSSに一文width:100vw;を追加するだけで画面と同じ幅になります。

.fullwidth{
  background: #7f31d6;
  color: #fff;
  padding: 10px;
  width:100vw;
}

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説1 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

先ほどと変わり、fullwidthが親要素を突き破っていますね(笑)

右に見切れてしまってわかりにくいですが、幅はブラウザの幅と同じになっています。

vwは親要素の幅ではなくブラウザの幅を基準にしますので、width:100vw;と書くと上の結果のようになります。あとは表示位置がずれてしまっているので、左端を基準にして画面内に収まるようにしていきます。

Viewport(vw・vh)については以前に解説していますので、ぜひこちらも見てみてください！

あわせて読みたい

【CSS】フルスクリーン・レンスポンシブに最適なViewport (vw・vh)を覚える CSSでボックスの幅や高さを指定する場合、パーセント（％）やピクセル（px）で指定することが多いと思います。しかしViewport(vw・vh)はフルスクリーン・レンスポンシブ…

基準の位置を画面の左端にする

次に今回のポイント2つ目のcalcが登場します。子要素fullwidthにmargin: 0 calc(50% - 50vw);を追加すると、基準の位置を画面の左端にすることができます。

.fullwidth{
  background: #7f31d6;
  color: #fff;
  margin: 0 calc(50% - 50vw);
  padding: 10px;
  width: 100vw;
}

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説3 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

親要素の幅からはみ出して子要素の幅が画面いっぱいになりました！ここが今回の一番のポイントなので解説します。

まずは子要素の左端を画面の真ん中する

margin: 0 calc(50% - 50vw);をわかりやすくするために分解してやっていきます。

まずはcalcなしでmargin: 0 50%;としてみます。

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説4 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

こうすることでタイトルの通り、子要素fullwidthの左端を画面の真ん中することができました。

画面の幅半分だけ左に移動する

ここで先ほど登場したvwが再度登場します。今、子要素fullwidthの左端は画面の真ん中になっていますので、あとは画面の幅半分だけ左に移動するためにmarginの50%から-50vw(画面の半分の値)を引いてやれば良いわけです。

そこでmargin: 0 calc(50% - 50vw);とすることで子要素の左端を画面の真ん中にして、そこからさらに画面の幅半分だけ左に移動するということができます。

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説3 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

画面いっぱいにした上で、中身は親要素の幅に合わせる

さて、ほぼゴールに近づいて来ましたが、まだ1つやりたいことがあります。

子要素fullwidthが画面いっぱいなったのは良しとして、その中身を親要素の幅に合わせたいです。以下が結果です。

See the Pen 親要素の幅からはみ出して画面いっぱいにするCSSを解説5 by 春日清伸 (@iuvtkzzs-the-flexboxer) on CodePen.

よく見るやり方で、背景は画面いっぱいにして中のコンテンツは親要素と合わせたい場合に活きる方法です。

これは実はすごく簡単で、marginとは反対の計算をpaddingでしてあげればできます。

margin: 0 calc(50% - 50vw);
padding: 10px calc(50vw - 50%);

難しいことは抜きにして、これでできるとだけ覚えてください（笑）

WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ

「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。

しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。

一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。

かすが

私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！

スクールで学ぶ5つのメリット

• カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
• 現役のプロから実践的なフィードバックを受けられる
• わからないことをすぐに質問・解決できる環境がある
• 制作課題を通じて、ポートフォリオが作成できる
• 学習仲間や講師とのつながりが、モチベーション維持につながる

スクール選びでチェックすべき5つのポイント

• カリキュラムが現場で必要とされる技術に対応しているか
• 現役デザイナー・エンジニアが講師として在籍しているか
• ポートフォリオ制作のサポートが充実しているか
• 卒業後の就職・転職支援が用意されているか
• オンライン・通学など、自分の生活スタイルに合った受講形式か

遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。

WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！

あわせて読みたい

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！ Webデザインを学びたいけど、どのスクールがいいのか分からない… スクール終了後のキャリアも不安 そんな悩み、ありませんか？ 特に未経験からスタートする方にとっては…