【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について
最終更新日:2018年06月02日 (初回投稿日:2015年08月25日)前回の「サイズの単位」の続きです。
vw, vh, vmin, vmax は CSS3 から新しく加わった単位です。
これは、viewport(ビューポート)を基準にした相対単位です。
vw | viewport width の略。1vw = ビューポートの幅の 1/100(100vwで横幅いっぱい) |
---|---|
vh | viewport height の略。1vh = ビューポートの高さの 1/100(100vhで高さ全部) |
vmin | viewport minimum の略。1vmin = ビューポートの高さか幅の小さいほうの 1/100 |
vmax | viewport max の略。1vmax = ビューポートの高さか幅の大きいほうの 1/100 |
対応ブラウザはコチラをごらんください→Can I use... Support tables for HTML5, CSS3, etc
モダンブラウザはだいたい対応しているようです。IEは9から、Android Browser は4.4から対応。
ビューポートってなんだろう?
vw, vh, vmin, vmax のそれぞれの冒頭の「v」は「Viewport」の頭文字。
ビューポートとは、ブラウザの表示領域のことです。
PC用のブラウザならウィンドウサイズ。
タブレットやスマホは、デバイスごとに決められた表示領域があって、機種によって表示領域が違うので「Viewport」という概念が必要になったんでしょうね。
vw や vh の範囲はどんなもんかを調べていたら、有益なコンテンツを見つけました。
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位... | コリス
コリスさんが翻訳・解説してくださっている元のサイトはこちらです。
Viewport vs Percentage Units | bitsofco.de
これによると、vw は html要素の幅よりも大きい、スクロールバーも含む表示領域なんだって。
body要素のサイズ < html要素のサイズ < ビューポートのサイズ
ビューポートはスクロールバーも含む領域。
html要素はスクロールバーを含まない領域。
body要素は、margin:0 にすれば、html要素とピッタリ同じに。
なので、ボックスをウィンドウ幅いっぱいに指定したい時、
vw を使うとbody や html 要素より幅が大きくなって表示に不具合が出るそうで、
vwでなく 100% を使うほうがイイんだそうです。
body要素に width:100vw でなく width: 100% を指定したほうがイイということ。
ウィンドウの高さいっぱいにしたい時こそ vh を使うべきなんだそうです。
body要素に width:100vh を指定すれば、最適ってこと。
vhを使ったレスポンシブレイアウトのサンプル
サンプルを作ってみました。各<section>要素が画面いっぱいになるレイアウトです。
クリックで開きます。
PCでウィンドウサイズを変えたり、スマホなどのデバイスで縦持ち横持ちにしても、<section>要素のサイズは表示領域ピッタリになります。
サンプルの HTMLソース(抜粋)はこちら
<header id="sc0">
<div id="hGroup">
<h1>TITLE</h1>
<p>text</p>
<a href="#sc1"><img src="img/arrwd.png"></a>
</div>
</header>
<section id="sc1">
<div class="scGroup">
<a href="#sc0"><img src="img/arrwt.png"></a>
<h1 class="ttl">Section 1</h1>
<p>text</p>
<a href="#sc2"><img src="img/arrwd.png"></a>
</div>
</section>
<!--以下略(同様に Section2〜3 が入ります)-->
サンプルの CSSソース(抜粋)はこちら
header,section {
margin:0;
width: 100%; /*body要素に対して横幅100%。当然bodyはmargin:0にしています*/
height: 100vh; /*100vh でビューポートの高さいっぱいに*/
display:table; /*親要素にdisplay:table*/
border-spacing:2em 0;
text-align:center;}
header div#hGroup,
section div.scGroup {
display:table-cell; /*子要素にdisplay:table-cell*/
vertical-align:middle} /*vertical-align:middleで縦方向のセンター*/
/*header*/
header {color:#fff; background:#000 url(../img/bg.jpg) center center /cover no-repeat}
/*section*/
section {color: #666;}
section#sc1 {background:#9f0}
section#sc2 {background: #000; color:#fff}
section#sc3 {background: #7ad3f3}
ちなみに、このサンプルでは、各<section>の内容を、縦方向センターにしています。
通常 margin などでは、横方向のセンター合わせはできるけど、縦方向はできません。
そこで、ブロック要素をあたかもテーブルセルのように扱うことができる「display:table-cell」を使っています。
テーブルセルにすると「vertical-alignプロパティ」が効くようになるので、縦方向センターができるんです。
「display: table」「display: table-cell」は displayプロパティの値です。
displayプロパティに関しては、
【17-1】displayプロパティでボックスの表示形式を自由に変えよう をご覧ください。
また、こちらに↓使い方をメモっていますので、ご興味ある方はご覧ください。
display:table-cell の親に display:table を指定しないと意味無い | *Web Design 覚え書き*
vertical-alignプロパティに関しては、
【32】インラインの縦方向の整列を決める vertical-alignプロパティをご覧ください。
vmin, vmaxを使ったレスポンシブレイアウトサンプル
vmin はビューポートの高さか幅のどちらか小さいほうをチョイスして基準にします。
vmax はビューポートの高さか幅のどちらか大きいほうをチョイス。
自動的に選んでくれるので便利です。
ってことは、ボックスの height と width に同じ vmin の値を指定すれば「正方形」のボックスができるはず。
ということで、サンプルを作ってみました。
クリックで開きます。
ソースはサンプル上にあります。
これ、PCビューでは正方形、スマホでは正方形は見にくいので長方形に調整しました。
デバイスによってCSSを切り替えるために、CSSのメディアクエリを使いました。
まず、スクロールしやすいように <section>要素の padding を 10vmin に調整。
そして、デバイスの横持ち(landscape)の場合は、幅を 80vmax に、横持ち(portrait)なら高さを 70vmax にしています。
vmax を使えば大きいほうの長さを使うので、こういうとき便利です。
@media only screen and (max-width: 670px) and (orientation:landscape) {
html {-webkit-text-size-adjust:100%;}
section {width:80vmax; height:60vmin; padding:10vmin;}
}
@media only screen and (max-width: 376px) and (orientation:portrait) {
section {height:70vmax; width:70vmin; padding:10vmin;}
}
次回予告
いかがでしたか? vh や vmin, vmax は、スマホなどのデバイスに最適ですね。
次回は、CSSの「色」と「透明度」を見てみましょう。
要素の色や透明度を決めるのもCSSです。
特に「透明度」はCSS3から比較的自由に指定できるようになって便利になりました。
- 関連記事
-
- 【11-4】marginの相殺(margin collapsing)
- 【11-3】はみ出て便利♪ ネガティブ・マージン(Negative Margin)
- 【11-2】marginの auto という値の「?」を解決しておこう
- 【11-1】marginと marginのショートハンド
- 【10】ボックスモデル(margin, padding, border を使いこなそう)
- 【9】HTML要素の インラインレベル・ブロックレベル について
- 【8】CSSの「色」と「透明度」の指定
- 【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について
- 【7-1】CSSのサイズの単位について(em, %, px, rem の使い分け)
- 【6】CSSって具体的に何ができる?(プロパティについてざっくりと)
- 【5】CSSの値の継承(Inheritance)のルール
- 【4】CSSの優先度のルール(ブラウザが混乱しないためのルールだよ)
- 【3】id とか classって何?(セレクタの「種類」を知っておこう)
- 【2】CSSはどうやって使うの?(基本構造とCSSを置く場所について)
- 【1】CSSってどんなもの? カスケーディングって何?
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク