Date： | 
Category：親要素を無視して画面幅100%指定できる？
要素の横幅を指定するCSSプロパティ「width」。
あるHTML要素にこのwidthを指定した場合、HTML上の親要素から影響を受けたり、影響を与えたりします。
ただ、例えば画面いっぱいの背景画像を一部エリアにのみ表現したい場合など、親要素を無視して横幅を指定したいケースもあるでしょう。
今回は、widthプロパティの値として使用する、親要素を無視して画面幅100%を指定できる単位を紹介します。
- 目次：親要素に依存せずブラウザ幅100%にするCSS指定
viewport幅（ブラウザの表示領域幅）の割合で幅指定する単位「vw」。
例えば以下のようなHTMLとCSSが存在し、画像エリアは画面いっぱいに広げて表示し、テキストエリアは親要素の横幅（980px）内におさめて表示させたいとします。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="area-image"> <img alt="画面いっぱいにしたい" src="hoge.jpg" /> </div> <div class="area-text"> <p>ここの文章エリアはコンテナ内におさめたいんですよ。</p> <p>ですからね、文章はコンテナ内におさめたいんですよ。</p> <p>画像はコンテナからはみ出させて、文章はおさめたい。</p> </div> </div> |
|
1 2 3 4 5 6 |
.container { width: 980px; } .area-image { width: ???; } |
この場合、widthプロパティの値（???）には、vwを指定するのが良いでしょう。
具体的には、下記のCSSとなります。
|
1 2 3 |
.area-image { width: 100vw; } |
100vwの「vw」という単位は、viewport幅に対して何パーセントなのか？を示す単位です。
数値が100ということは100パーセント、すなわちviewport幅いっぱいを指定したこととなります。
（※スクロールバーはかぶさって表示されることとなります。）
その他、viewportのパーセンテージで指定する単位をまとめると・・・
先のようにviewportに対して何パーセントなのかを示す単位は「vw」を含めて全部で4種類存在します。
具体的には、以下のとおりです。
- vw
- viewport width
ビューポートの幅に対する割合。 - vh
- viewport height
ビューポートの高さに対する割合 - vwin
- viewport minimum
ビューポートの幅と高さのうち、値が小さい方に対する割合。 - vwax
- viewport max
ビューポートの幅と高さのうち、値が大きい方に対する割合。
個人的にはですが、4種類のうち、実は一番使い勝手が良い単位は「vh」だと思います。
横幅画面いっぱいについては、特殊なHTML構成でない限り「%」指定でも簡単に実装可能なのに対し、縦幅画面いっぱいは「%」指定だとうまくいかないケースが多いからです。
超多機能でSEOに強い！ブロガー・アフィリエイターを虜にするWPテーマDIVER
国内最速のサイト表示スピード！最新技術が詰め込まれたWPテーマTHE THOR
