8/30〜|ライターのダイチが運営している個人メディア「ダイブログ」とPENGIN BLOGを統合しました

【px・em・rem・%】CSS単位の使い分けについて考察

お知らせ

当記事の元サイト「ダイブログ」は、8/30〜「PENGIN PLOG」と統合しました。
※元ドメイン(https://daib-log.com/〜)からはリダイレクト処理されます。

今回はWebコーディング時に迷いがちな単位の使い分けについて自分なりにまとめました。

先にお伝えしておくとコーディング時の単位に関しては「これが正解」と言い切れるものは無いと思っています。

案件によってルールが引かれてる場合もありますし、基本的には適材適所使うことが前提です。

Web系コーディングの話でよく議論が起こるテーマですが、あくまで様々な方の意見や情報を見たうえで、現時点での僕の認識をまとめた形になっているということをご了承ください!

当記事の結論

  • フォントサイズ:rem
  • 要素の大きさ、marginやpadding:rem
  • 親要素にあたる包含的なcontainer要素や画面幅いっぱいに表示させたい要素:
  • letter-spacingや擬似要素との間隔:em
  • borerなどの可変させたくない要素:px
  • ヒーローイメージやモーダルウィンドウ など画面を占有して表示させる要素:vw

冒頭にも書きましたが、「これが一番正しい」とかではないです。

ただ自分でルールを決めてコーディングするなら、この使い分けが一番シックリくる、という内容でまとめています。

次からその根拠と解説を紹介していきます。

絶対値と相対値

単位には「絶対値」と「相対値」があるので、一応この情報から載せておきます。

絶対値

固定的な値となり、他要素の単位や大きさに影響を受けません。今回紹介する単位の中ではpxがこれに該当します。また、Webコーディングでは使用されることがありませんが、cmやmm、ptなどもこれに当たります。

相対値

可変的な値となり、他要素の単位や大きさに影響を受けます。em、rem、%、vwは相対値ということになります。

親要素に対しての〜〜や、画面幅に対しての〜〜といった形で、その大きさを決定する元の数値によって可変する単位ということです。

単位(px、em、rem、%、vw)の違い

px

ピクセルの略です。画面サイズの可変や、他要素の単位や大きさに関わらずサイズが固定される絶対値です。

%

指定する要素の親要素に対する相対値です。親要素にサイズ指定がされていなければHTMLの階層を遡ってブラウザ幅(画面幅)が基準となります。

親要素に200pxと指定されている場合、指定したい要素に50%と指定すれば、その大きさは100pxになります。

em

emは親要素のフォントサイズに影響を受ける単位です。

<body>
<style>
    .em1 {
      font-size: 1em;
      /* 16px * 1 = 16px */
      letter-spacing: 0.5em;
      line-height: 1.5em;
    }
    .em2 {
      font-size: 2.5em;
      /* 16px * 2.5 = 40px */
      letter-spacing: 0.5em;
      line-height: 1.5em;
      color: red;
    }
    .em2-child {
      font-size: 0.8em;
      /* 40px * 0.8 = 32px */
      letter-spacing: 0.5em;
      line-height: 1.5em;
      color: blue;
    }
  </style>
  <div class="em1">
    <p>em1で指定しています。</p>
  </div>
  <div class="em2">
    <p>em2で指定しています。</p>
    <div class="em2-child">
      <p>em2-childで指定しています。</p>
    </div>
  </div>
</body>

上のようにclass=em1やclass=em2のように親要素を遡ってもフォントサイズが指定されていない場合は、bodyのデフォルトフォントサイズ(16px)が常に基準になります。

em2-childは親要素em2のフォントサイズに影響を受けます。

emで指定したフォントサイズの違い

言い換えると、親要素にフォントサイズが指定されていなければ、単位emは一文字分の大きさという理解もできます。

rem

ルート要素のフォントサイズが基準になります。

rootに20pxと指定していた場合、1rem=20pxとなります。何も指定しない場合通常rootは16pxです。

rootのフォントサイズを変更すると、各要素に指定していたremの大きさも一括で変更されることになります。

<body>
<style>
    .rem1 {
      font-size: 1rem;
      /* 16px * 1 = 16px */
      letter-spacing: 0.5rem;
      line-height: 1.5rem;
    }
    .rem2 {
      font-size: 2.5rem;
      /* 16px * 2.5 = 40px */
      letter-spacing: 0.5rem;
      line-height: 1.5rem;
      color: red;
    }
    .rem2-child {
      font-size: 0.8rem;
      /* 16px*0.8 = 12.8px */
      letter-spacing: 0.5rem;
      line-height: 1.5rem;
      color: blue;
    }
  </style>
  <div class="rem1">
    <p>rem1で指定しています。</p>
  </div>
  <div class="rem2">
    <p>rem2で指定しています。</p>
    <div class="rem2-child">
      <p>rem2-childで指定しています。</p>
    </div>
  </div>
</body>

先ほどのemと数値は同じにしてます。違いはrem2-childの大きさです。

em指定の場合は親要素に影響しましたが、remの場合は親要素の影響は受けないので、rootの16pxが基準になります。

vw

vwは「viewport width」の略で、画面幅を100とした時の単位になるため、1vwであればビューポート幅の 1%ということになります。

vhはheightなので高さに対する割合を指定できます。他にもvmin(ビューポートの幅と高さのうち、値が小さい方に対する割合)、vmax(ビューポートの幅と高さのうち、値が大きい方に対する割合)もあります。

PCから閲覧する場合はブラウザ幅を可変させることがありますが、その動きに合わせて大きさが変動します。

単位(px、em、rem、%、vw)の使い分け

ここからが本題になります。コーディングを想定して単位をどう使い分けるかをまとめています。

フォントサイズ:rem

pxで指定しているとブラウザの機能にあるフォントサイズ設定をいじった際にも影響を受けなくなる為、ユーザーの想定した拡大・縮小の挙動になりません。

ここの設定をする人は少ないのかもしれませんが、そもそも操作で得たい想定の通りに動かないというのは、ユーザビリティ的な問題があるので、想定通りに表示反映させるためにはpx以外の指定が必要です。

ただ、emや%のように親要素の大きさに左右されるのは管理上大変ですし、vwで指定するとディスプレイサイズ次第では大きさが極端になり視認性が悪くなることが多です。

なのでここは無難なremで指定するようにします。

知らなかった方用に、ブラウザフォントサイズの変更方法が解説されてる参考記事も貼っておきます。

要素の大きさ・marginやpaddingなど:rem

このあたりの指定は正直pxの方が直感的で分かりやすいとは思っているのですが、remで指定しておくとブラウザのフォントサイズ設定を変えた時、要素や余白も相対的にあわせて変動します。

要はOSのズーム機能を使った時と同じような挙動になるため、レイアウトが崩れにくくなるということです。

OSのズームとは?という方に一応載せておきます。たぶん使ったことある方も多いと思いますが。。。

要素サイズはpx、フォントサイズをremで指定しているような時に、ブラウザフォントサイズを変更するとレイアウトや表示が本来のデザインから崩れることがあります。

下の写真のページはレイアウト要素がpx、フォントサイズがremで指定されていました。

ブラウザフォントサイズ変更前

ブラウザフォントサイズ変更前

ブラウザフォントサイズを拡大したら・・・

ブラウザフォントサイズ変更後

こんな感じになりました。

要素の大きさはpx指定なので変わらないけど、フォントサイズはrem指定なので、フォントだけ拡大されることで要素の中で見切れています。

こうなることを防ぐには、要素サイズ・フォントサイズもpxかremどちらかに統一させる必要があるのかなと思います。

上に書いた通りどちらもremで指定しておくと、要素とフォントサイズが相対的に拡大・縮小されるため、余白も含めた大きさの関係性は維持されます。

逆にユーザー操作で諸々のバランスを可変させたくない場合は、単位をpxで統一させる必要があります。

ただ一つ注意点ですが、html(ルート要素)に直接pxでフォントサイズを指定した場合、他要素をremで指定していても可変性は失われます。

つまり要素のサイズなどにremを使う意味は実質無くなります。

html {
  font-size: 16px;
}
/* ↑ここにpxでフォントサイズを指定すると */
p {
  font-size: 1rem;
  padding: 1rem;
}
/* ブラウザフォントサイズ機能をいじっても変化しない */

親要素にあたる包含的なcontainer要素や画面幅いっぱいに表示させたい要素:%

例えばheaderやfooterなど画面横幅いっぱいに表示させたい要素や、要素を包むためのflex containerのブロックなどです。

という単位は「親要素」に影響を受けるので、body直下の子要素としてheaderやfooter、container要素などを指定している場合、width:100%と指定すれば、body=画面幅に対して100%分広げられます。

また、containerブロックや画面幅など、包含されている要素に対して2等分、3等分といったように相対的なサイズで指定したい時などは%指定が必要になります。

というより、pxやremなどで固定的に単位を設定すると、PCブラウザから画面幅を小さく可変した際に画面から見切れたり、横スクロール発生(レイアウト崩れ)の原因になることもあります。

これ以上小さい画面で見ることを想定しない(iphoneSEの320px以下など)要素のサイズはremで指定、それ以上の大きさを指定する時は%で可変に対応させる、という考えもありかなと思います。

letter-spacingや擬似要素との間隔:em

letter-spacing(字間)は文字の大きさに合わせて相対的に指定したほうがキレイに整うので、emが扱いやすいです。

先ほどemの解説をしたところで記述したコードのように、全て同じ数値+emで指定してもいい感じのバランスが保てます。

実際は一つ一つに記述するのも効率が悪いので、共通パーツとしてフォントサイズ設定のclassを設定し、そこにletter-spacingも記述しておくのが良いかと思います。

また、テキストに擬似要素でアイコンなどの装飾を加えることがあるかと思いますが、そことの間隔にemを使っておくと、テキストのフォントサイズに連動して相対的に間隔を保ってくれます。

上ではmarginやpaddingもrem指定と書きましたが、文字サイズに合わせた余白を設けたい時はemを使うことはアリだと思います。

borerなどの可変させたくない要素:px

ブラウザ幅が可変しても大きさや太さを変えたくない要素、例えば枠線や図形などborderで指定するものについてはpxが適しています。

ブラウザのフォントサイズ設定をいじっても、相対的に可変させる必要の無いサイズ(10px以下程度)のもののイメージです。

ヒーローイメージやモーダルウィンドウ など画面を占有して表示させる要素:vw

画面幅に対して「何%分表示させる」ということが決まっている要素はvwが便利です。

1vw=画面幅の1%なので、100vwであれば画面横幅100%となります。

便利な単位ではあるんですが、画面幅に合わせて常に割合で可変することもあり、フォントサイズなどに指定すると極端なサイズになるなど意外と管理が難しいです。

なのでヒーローイメージやモーダルウィンドウなど、画面占有することが決まってるレイアウトに使用する方が良いのかなと思います。

まとめ

ということで単位の違い、使い分けについてまとめてみました。

フォントサイズと要素サイズという、Webサイトのレイアウトを左右する大枠の部分で指定される単位はremに、それ以外は適宜使い分けましょ、というのがこの記事のザックリとしたまとめです。

ここまで書いておいてなんですが、個人的にはpx統一の方が直感的で一番スッキリはすると思っています。GAFA(Google・Amazon・Facebook・Apple)のWebサイトも現在メインの要素単位にpxを採用しています。

途中書いたブラウザフォントサイズ変更についてどう捉えるか、というところで大きく見解が変わってくるのかなと見ています。

ただ、このフォントサイズ設定を変更している人は全体の3%程度はいるようなので見逃せない数値かなと。

とにかく現時点で正解は無さそうなので、スタイリングの柔軟性も考慮しつつ、固執せずに考えることが最も重要なのかなと思います。

レスポンシブ対応のコーディング時にも意識しないといけないテーマになっているため、よかったら別記事もご覧ください!

【2021年】レスポンシブデザインのブレイクポイントまとめ!

また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください!

PENGIN無料コーディング課題

【デザインカンプ無料配布】未経験からのコーディング学習ステップ

オススメ書籍紹介

【初学者向け】書籍でWeb制作を学ぶ!オススメ書籍をジャンル別に紹介! Web制作のおすすめ本24選!(コーディング・Webデザイン)

オススメUdemy講座紹介

Udemyオススメ講座まとめ 【2021年8月】Udemy×Web制作!オススメ優良講座を紹介!