Help us understand the problem. What is going on with this article?

HTML の 文字サイズ の 指定 際などに使用する remとemとは

More than 1 year has passed since last update.

目的

文字サイズの指定などで使用されるremとemは何なのかについてまとめる。

rem

  • html要素のfont-sizeを基準にした相対的なサイズの指定単位。
  • html要素のfont-sizeが変化すれば自動的にremで指定した各サイズも変更になる。
  • ブラウザにより、文字の大きさが変わるために相対的な値で指定する。
  • ブラウザや、表示端末の違いを受けにくいなどのメリットがある。
  • 1remでhtml要素のfont-sizeと同じサイズになる。
  • 2remでhtml要素のfont-sizeの倍のサイズになる。

em

  • 親要素のfont-sizeを基準にした相対的なサイズの指定単位。
  • 親要素のfont-sizeが変化すれば自動的にemで指定した各サイズも変更になる。
  • 単純なデザインのページだとemでもある程度のレスポンシブ対応はできるが、入れ子が乱立すると指定が複雑になってしまう。
  • 1remで親要素のfont-sizeと同じサイズになる。
  • 2remで親要素のfont-sizeの倍のサイズになる。

remを使いたいけど文字サイズの実感が沸かない。。。

  • remを使って文字サイズを指定したいけど1remや2remのサイズはサイズ感に実感が沸かない。
  • 1remが10pxとなる設定をすることにより躊躇なくremによるサイズ設定ができるようになる。
  • 1remが10pxとなるCSSファイルでの設定方法を下記に記載する。
*/ 下記の設定をCSSファイルの最初に記載する /*
html {
 font-size: 62.5%;
}
miriwo
web系のバックエンドの知識を習得中! 2019/07/07~毎日更新中
https://miriwo.hatenablog.com/
boomtechcafe
埼玉県の朝霞台を拠点にエンジニアの勉強会、交流会等のイベントを企画しています! 朝霞台駅か北朝霞駅が全然行けちゃうぜってエンジニアの方がいたら是非! もくもく会とかゲーム大会とかもやれたらな~って思ってます。
https://boom-teck-cafe.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away