【CSS】親要素に依存せずブラウザ幅100%にする指定とは?

親要素を無視して画面幅100%指定できる?

要素の横幅を指定するCSSプロパティ「width」。

あるHTML要素にこのwidthを指定した場合、HTML上の親要素から影響を受けたり、影響を与えたりします。

ただ、例えば画面いっぱいの背景画像を一部エリアにのみ表現したい場合など、親要素を無視して横幅を指定したいケースもあるでしょう。

今回は、widthプロパティの値として使用する、親要素を無視して画面幅100%を指定できる単位を紹介します。

viewport幅(ブラウザの表示領域幅)の割合で幅指定する単位「vw」。

例えば以下のようなHTMLとCSSが存在し、画像エリアは画面いっぱいに広げて表示し、テキストエリアは親要素の横幅(980px)内におさめて表示させたいとします。

この場合、widthプロパティの値(???)には、vwを指定するのが良いでしょう。
具体的には、下記のCSSとなります。

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構成でない限り「%」指定でも簡単に実装可能なのに対し、縦幅画面いっぱいは「%」指定だとうまくいかないケースが多いからです。

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags

Trackbacks & Comments

Trackback URL for this post:

Leave a Reply

flight