We Blog Weblog

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

・他にもいろいろあるよ

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

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

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP