【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

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

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

HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
総合評価
( 5 )
メリット
  • HTMLとCSSの基本が体系的に学べる
  • Webデザインの基本が学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,486 (2024/10/07 13:25時点 | 楽天市場調べ)
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

サイズ単位表

単位基準
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に影響されない
   */
}

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次