このページの本文へ

知らないと損!CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗る

2017年05月09日 13時00分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

CSSの値に指定できる単位といえば、pxや%などがおなじみ。でもレスポンシブなサイト制作では、vhやvwといったViewport単位がとても便利です。基本と使いどころを解説します。

CSSにViewport単位(Viewport Uints)が導入されてから数年になります。ブラウザーのサイズが変更されるたびに値が変わるという意味で、真にレスポンシブな単位と言えます。Viewport単位について聞いたことはあるものの、詳しいことはまったく分からないという人は、この記事で理解を深めてください。

単位とその意味

CSSにはViewportを基準とした単位が4つあります。vhvwvminvmaxです。

  • Viewport Height(vh):viewportの高さに基づく。1vhはviewportの高さの1%に相当する
  • Viewport Width(vw):viewportの幅に基づく。1vwはviewportの幅の1%に相当する
  • Viewport Minimum(vmin):viewportの(高さと幅のうち)小さいほうの寸法に基づく。viewportの高さが幅より小さい場合、1vminはviewportの高さの1%に相当する。同様にviewportの幅が高さより小さい場合、1vminはviewportの幅の1%に相当する
  • Viewport Maximum(vmax):viewportの(高さと幅のうち)大きいほうの寸法に基づく。viewportの高さが幅より大きい場合、1vmaxはviewportの高さの1%に相当する。同様にviewportの幅が高さより大きい場合、1vmaxはviewportの幅の1%に相当する

Viewportがさまざまな状況でどのような値を取るか説明します。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング