【CSS】ルートフォントサイズを10pxに設定する方法

デフォルトのルートフォントサイズは16pxですが、
CSSを書くときに16pxだと計算がしにくかったりしますよね。

今回はこれを10pxにする方法についてまとめたいと思います。
きりのいい10pxとしていますが、この数字は変更可能です。

それでは早速みていきましょう〜。

ルートのフォントサイズを10pxにする方法

ルートのフォントサイズを変更するには、
CSSのhtmlセレクターでフォントサイズの数値を変更します。

html {
  font-size: 62.5%;
}

この62.5%ってなに？というかんじですよね。

デフォルトのフォントサイズは16pxとなっています。
これを10pxとしたいので、10px / 16px = 0.625(62.5%)と割合を出しています。

これでデフォルトのフォントサイズが10pxの状態になっているので、
あとはフォントサイズを指定するときに
1rem = 10pxで計算して記述するととても楽になります。

文字サイズにおいてのemとremのルールは下記のようになっています。

emもremもCSS単位の相対値の種類です。

「rem」はいつもルートのフォントサイズを基準とします。
一方、「em」はpaddingやmarginにおいては、
親要素ではなく自身のフォントサイズを基準にしていて、remよりややこしいです。

おわりに

いかがでしたでしょうか。

フォントサイズの設定方法は状況に応じて変わることも多いと思いますが、
手段のひとつとして知っておくと便利ですよね。

最後までお読みいただきありがとうございました！

【CSS】要素をど真ん中に配置する方法【3つ紹介】要素をど真ん中に配置したいことってありますよね。 ヒーローイメージでも文章などのコンテンツが、ど真ん中に配置されていることも多いのではないでしょうか。 今回は要素を縦にも横にも真ん中に配置する方法を2つ挙げたいと思います。 1.display: flex;を使った方法 2.position: absolute;を使った方法 ではそれぞれもう少し詳しく見ていきましょう。...