rem

Web

2021年9月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「rem」について調べたことを書きます。

remって何やねん

remとはroot emの略で、root要素（＝html）のfont-sizeを基準とした相対値で文字サイズや長さを規定する単位です。

（emは親要素のfont-size基準）

emの呼称は、昔の活版印刷？で大文字の「M」1文字分の大きさが文字の大きさの単位として用いられていたことに由来するらしいです。

長さの単位一覧

px	ピクセルサイズが固定される絶対値デフォルトの文字サイズは16px
rem	rootに対して何倍の大きさかデフォルトでは1rem＝16px
em	親要素に対して何倍の大きさか
％	emと同じ親要素に対して何％か
vw	viewport width 画面幅に対して何％か 1vw＝画面幅の1％

使用例

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

h1です。

h2です。

h3です。

h4です。

h5です。

h6です。

small {
  font-size: 80%;
}

smallです。

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

subは_{下付き文字}です。

supは^{上付き文字}です。

まとめ

・remは相対的な長さの単位

・デフォルトでは1rem＝16px

・他にもいろいろあるよ

結局なんでpxではなくremを使うのか、よくわかりませんでした。

スマホやタブレットでも文字を読みやすくするためかな？と思います。

この記事を書いた人

みやの

Web・DTP担当

We Blog Weblog

rem