MENU
オンライン講座開催中
html&css講座開催中

CSS文字サイズ「rem、em、%、px、vw、vh」の特徴

CSS文字サイズ「rem、em、%、px、vw、vh」の特徴
にゃんこ1

混乱しやすい文字サイズ表記を整理にゃん。

レスポンシブサイトでは「rem」指示が人気。混乱しやすいのは「%やem」ですよー。

目次

この記事の内容

  • %やemは、親要素×小要素の数値になる。
  • remは、指示した%数値になる。
  • pxは、指示した数値になる。
  • vwやvhは、画面幅の%数値になる。

%、em(エム)文字サイズ

親要素を基準とした文字サイズで親要素×子要素となる

%やemは、親要素×子要素のサイズにとなる。

%の場合

html{font-size: 100%;}
body{font-size:160%} /*本文の文字サイズ*/
h2{font-size:120%;}
p{font-size:120%;}
a{font-size:120%;}
div{font-size:1.2em;}
h2{font-size:120%;}
にゃんこ1

にゃんと! 子要素の%が小さいのに、実際は大きい!!

%とemの特徴
親要素×子要素なので、子要素の数値は小さいが、実際は(親要素)160%×(子要素)120%=192%になるので、大きくなる!

em(エム)の場合

html{font-size: 1em;}
body{font-size:1.6em} /*本文の文字サイズ*/
h2{font-size:1.2em;}
p{font-size:1.2em;}
a{font-size:1.2em;}
div{font-size:120%;}
h2{font-size:1.2em;}
  • 孫要素は、子要素×孫要素になる

rem文字サイズ

親要素の影響を受けない文字サイズ

多くのブラウザがデフォルト設定の場合の文字サイズが16pxである。よって、多くの場合が「100%=1em=1rem=16px」。

オススメ!
16px×0.625=10pxを基準として始める。

なので、こちらを最初に書き込んでおくと扱いやすくなる。

html { font-size: 62.5%; } /* font-sizeは16pxの62.5%の10px */

合わせて書くと

html { font-size: 62.5%; } /* font-sizeは16pxの62.5%の10px */
body{font-size:1.6rem} /*本文の文字サイズ*/
h2{font-size:1.2rem;}/*font-size: 12px同等 */
p{font-size:1.2rem;}
a{font-size:1.2rem;}
div{font-size:1.2rem;}
h2{font-size:1.2rem;}

特徴:レスポンシブサイトにおける端末ごとの文字サイズ設定がしやすい

メディアクエリを使って文字サイズの調整が簡単!

にゃんこ1

htmlタグの設定サイズを変更するだけで画面幅に応じた調整が簡単。

@media screen and (min-width: 721px) {
    html {
        font-size: 75%;
    }
}
@media screen and (max-width: 720px) {
    html {
        font-size: 62.5%;
    }
}

px文字サイズ

絶対値による文字サイズ指定

ブラウザによってはユーザー操作による文字サイズの拡大/縮小に対応できない。

端末ごとに見た目の文字サイズが異なって表示される場合がある。

body{font-size:16px} /*本文の文字サイズ*/
h2{font-size:12px;}
p{font-size:12px;}
a{font-size:12px;}
div{font-size:12px;}
h2{font-size:12px;}

vw、vh

表示画面の高さを基準に、割合で指定

vwの場合

幅の1%1、2で2%になる。

vhの場合

高さの1%1、2で2%になる

まとめ

それぞれの利点

  • %やemは、親要素を変えるだけで%で一括変換できる。(画面幅に応じた大きさになる)
  • remは、それぞれ個別に%指示できる。レスポンシブ向け。(画面幅に応じた大きさになる)
  • px絶対値でそれぞれ個別に指示できる。(画面幅が変わっても大きさ数値キープ)
  • vwやvhは、画面幅に応じた%の大きさになる。
にゃんこ2

ちなみに、Chromeのデフォルト最小表示文字10px以下の指示はしない方が良きと思うにゃ。

詳しくは講座に来てね

CSS文字サイズ「rem、em、%、px、vw、vh」の特徴

この記事が気に入ったら
フォローしてね!

  • URLをコピーしました!
目次
閉じる