HTML/CSS

【CSS】px、%、em、rem、vw、vh、vmax、vminの使い方

CSSには幅や文字サイズを設定する時に使用する単位がpx、%、em、rem、vw、vh、vmax、vminの8種類あります。

それぞれの単位には特徴があります。その特徴を正しく理解することで、状況に応じて最適な単位を設定することができます。

本記事では、それぞれ単位の特徴と使い方について解説します。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

サイズ単位表

サイズ単位表
単位基準
px無し
%親要素
em親要素
remルート要素
vwビューポートの幅
vhビューポートの高さ
vmaxビューポートの幅と高さ
vminビューポートの幅と高さ

サンプルコード

以降の解説で実際にpxやemなどのサイズ単位をサンプルコードを用いて解説していきます。自分のパソコンでコードを入力しながら確認したい方は以下のサンプルコードを使用してください。

▼px,%,em,remで使用するサンプルコード

<div id="parent">
  <p>親要素</p>
  <div id="child">
    <p>子要素</p>
    <div id="grandchild">
      <p>孫要素</p>
    </div>
  </div>
</div>

▼vw,vh,vmax,vminで使用するサンプルコード

<div id="content">
  <p>コンテンツ</p>
</div>
#content{
  /* 中央寄せと背景色 */
  display:flex;
  align-items:center;
  justify-content:center;
  background:#00f;
}

pxの使い方

1つ目のサイズ単位のpxです。pxは固定値でブラウザの幅や親要素の幅が変更されても変わることのない値です。

例えば、font-size:20pxを設定した場合、パソコンとスマートフォンどちらも20pxサイズの文字が表示されます。

#parent {
  font-size: 10px;
}
#child {
  font-size: 20px;
  /*
      #parentに影響されない
    */
}
#grandchild {
  font-size: 30px;
  /*
      #childに影響されない
   */
}

%の使い方

2つ目のサイズ単位は%です。%は親要素に適用されている値によって変化します。

%は普段の生活で使うものと全く同じように使います。例えば親要素にfont-size:10pxが指定されている状態で子要素にfont-size:200%を設定した場合、2倍の20pxが適用されます。

#parent {
  font-size: 20px;
}
#child {
  font-size: 150%;
  /*
      #parentの20pxの150%
      20 * 1.5 = 30px
    */
}
#grandchild {
  font-size: 200%;
  /*
      #childの30pxの200%
      30 * 2 = 60px
    */
}

emの使い方

3つ目のサイズ単位はemです。emは親要素に適用されている値によって変化します。

emは%と基本的に同じような使い方で、1emが親要素のサイズを表しています。例えば親要素にfont-size:20pxが指定されている状態で子要素にfont-size:1.5emを設定した場合、1.5倍の30pxが適用されます。

#parent {
  font-size: 10px;
}
#child {
  font-size: 2em;
  /*
      #parentの10px = 1em
      2em = 20px
    */
}
#grandchild {
  font-size: 1.5em;
  /*
      #childの20px = 1em
      1.5em = 30px
    */
}

remの使い方

4つ目のサイズ単位はremです。remはルート要素に適用されている値によって変化します。ルート要素とはhtmlタグのことを指します。

1remはhtmlタグに設定されているサイズを表しています。例えばhtmlタグにfont-size:30pxが指定されている状態で要素にfont-size:0.5remを設定した場合、0.5倍の15pxが適用されます。

html {
  font-size: 16px;
  /*
      ルート要素の16px = 1rem
      */
}

#parent {
  font-size: 1rem;
  /*
          ルート要素の16px
        */
}
#child {
  font-size: 1.5rem;
  /*
          ルート要素の16px * 1.5 = 24px;
        */
}
#grandchild {
  font-size: 2rem;
  /*
    ルート要素の16px * 2 = 32px;
        */
}

vwの使い方

5つ目のサイズ単位はvwです。vwはビューポートの幅によって適用される値が変化します。

1vwはビューポートの幅1%のサイズになります。例えば、ビューポートの幅が1000pxの状態でwidth:50vwを設定した場合、半分の500pxが適用されます。

#content{
  width:50vw;
  /*
    50vw = ウィンドウサイズの半分の大きさ
  */
}

vhの使い方

6つ目のサイズ単位はvhです。vhはビューポートの高さによって適用される値が変化します。

1vhはビューポートの高さ1%のサイズになります。例えば、ビューポートの高さが500pxの状態でheight:25vhを設定した場合、1/4の125pxが適用されます。

#content{
  height:100vh;
  /*
    100vh = ウィンドウサイズの高さ
  */
}

vmaxの使い方

7つ目のサイズ単位はvmaxです。vmaxはvwやvhと同様にビューポートによって適用される値が変化します。

vwやvhと異なる点は、状況に応じてビューポートの幅を基準にサイズを適用したり、ビューポートの高さを基準にサイズを適用します。

では、その基準とは何なのでしょうか?答えは、幅と高さどちらの方が大きいかを基準にし、大きい方を基準に値を適用させます。例えば、幅1000px,高さ500pxのビューポートの場合、幅の方が高さに比べ大きいです。そのため10vmaxを設定した場合、1000pxの1/10の100pxが適用されます。

逆に幅300px,高さ800pxのビューポートの場合、高さの方が大きいので50vmaxを設定した場合、800pxの1/2の400pxが適用されます。

#content{
  width:75vmax;
  /*
    75vmax = 幅と高さの大きい方を基準にした3/4の大きさ
  */
}

vminの使い方

8つ目のサイズ単位はvminです。vminはvmaxと同様にビューポートによって適用される値が変化します。

vminはvmaxの反対で、ビューポートの幅と高さどちらが小さいかを基準にし、小さい方を基準に値を適用させます。例えば、幅1200px,高さ500pxのビューポートの場合、高さの方が幅に比べ小さいです。そのため50vminを設定した場合、500pxの1/2の250pxが適用されます。

逆に幅400px,高さ600pxのビューポートの場合、幅の方が小さいので50vminを設定した場合、400pxの1/2の200pxが適用されます。

#content{
  width:50vmin;
  /*
    50vmin = 幅と高さの小さい方を基準にした1/2の大きさ
  */
}

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村