Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケター・WEBコーダーとして日々従事しており、会社ではWindows、お家ではMacの両刀遣い。iPad Proは毎日持ち歩いています。PCデスク周りを快適にすることやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしているガジェットブロガーです。写真撮影が趣味になりました。
ルイログをGoogleニュースで読む
この記事の目次
CATEGORY

2次元のルイ

ブログやるなら SWELL × ConoHa WING がおすすめ!ルイログはこの構成で運営しています

ルイログ愛用ブログテーマSWELL

今選ぶBESTサーバー ConoHa WING

ルイログも愛用中!

YouTubeチャンネル開設しました!
ステマ規制への対応と記事内広告について

本サイト内のコンテンツはルイログが独自に制作しています。 メーカー等から商品提供を受けることもありますが、その場合は記事内にPR表記と提供を受けている旨を明記しています。 また、コンテンツの内容や評価に関する決定にも一切関与されていません。 アフィリエイトプログラムにより記事内で紹介する商品を購入することで当サイトに売り上げの一部が還元されることがあります。 詳しくはサイト運営ポリシーをご覧ください。

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

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

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

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

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

もくじ
この記事の著者
R.U.I

ガジェットブロガー

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 なので覚えやすいですね。

  • %は親要素に紐付けられて
  • vw や vh はビューポート幅を基準にする

です。なんとなく覚えておくと良いと思います。

そして上記サンプルコードを実装したイメージがこちら。

【コピペで簡単】cssで親要素を無視してブラウザ幅100%で表示させる!
cssで親要素を無視して画像をブラウザ幅100%で表示させました

こんな風になります。

少々分かりづらいかもですが、親要素の背景グレーよりも画像がはみ出て表示されているのが確認できれば。

スマホやタブレットだけで利用したい場合は、@media screen 等でレスポンシブデザインとして記述してあげてください。

まとめ

ページを作っていて、「画像だけは大きく見せたい・・・全体のコンテンツを囲んで色々指定したけど、その中のコンテンツ1つ1つの見出し用バナーは横幅100%で表示させたい・・・」という、かゆいところに手が届くCSS。

今回もコピペで簡単に実装できるように用意しました。

結構使えるテクニックだと思うので、よければブックマーク等しておいてください!

 

良きWEBデザインをっ!

▷WEBデザインカテゴリをチェック

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ