【コピペで簡単】CSSで親要素を無視してブラウザ幅100%で表示させる！

2023年9月5日

R.U.I

ページやコンテンツを作っていると、外枠はmarginやpaddingで隙間をあけて文字を読みやすくしたりしますよね。

でもそうすると、画像も勿論その枠の中に入っちゃいます。でも、このコンテンツは横幅いっぱいに表示したい・・・このバナーや画像は横幅いっぱいに表示したい・・・。そんなとき、ありますよね？

今回はその悩みを解決！今回もコピペで簡単に実装できるようにしたので是非使ってみてください。

この記事の著者

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。プロフィール詳細やレビューガイドライン

CSSで親要素を無視してブラウザ幅100%で表示させる方法

今回のサンプルは私が途中で画像を100%表示にしたいなと思ったこともあり、画像バージョンで方法を説明しますね。

まずはHTMLをば。

<div class="container">
     <p>通常の枠内にあるコンテンツ上</p>
     <div class="full-width">
         <img src="画像URL" alt="">
     </div>
     <p>通常の枠内にあるコンテンツ下</p>
 </div>

containerが親コンテンツとして、full-widthが画像100%に見せるコンテンツとして用意しています。

CSSはこちら。

 .container {
     max-width:1000px; /お好みで/
     margin:0 auto;
     background-color: #ccc; /わかりやすくするために色付けしています/
 }
 .full-width {
     width:100vw; 
     position: relative;
     left: 50%;
     right: 50%;
     margin-left: -50vw;
     margin-right: -50vw;
 }
 .full-width img{
     max-width:100vw;
     width:100vw;
 }

HTMLもCSSもシンプル！これだけのコードで簡単に親要素を無視してブラウザ幅100%で表示が実装できます。

2次元のルイ

親要素からはみ出して横幅100%表示ができたことがわかりやすくするために親要素に薄いグレーの背景をつけているので、適宜そのコードは消してください。

「 width:100vw; 」というのが、意味は違えど100%の代わりになるコードですね。
vw は単位の一つで、略さなければ viewport width となります。
ちなみに高さの場合は height:100vh; となって、こちらは viewport height です。
w と h なので覚えやすいですね。