px em remを使い分ける【CSS】

こんにちは、マサヒロです。

仕事で外回りをしていたのですが、帰りのSAで食べた肉うどん美味かったです。
夜遅くのSAは人めちゃくちゃ多いですね、余談です。

今回はCSSのサイズ指定時の単位についてです。

文字はrem、四角形等のシェイプはpxと使い分けてる方が多いのではないでしょうか。
人それぞれ流派があると思うのですが、自分はvwの流派を受け継ぎました。

大まかにはCSSのサイズ指定の単位は下記の通りです。

【px】【em】【rem】【%】【vw】【vh】

pxとremは馴染み深いと思いますが、emはあまり使われない方も多いのではないでしょうか。

単位: px とは

pxとは「小さなドットの点」のことを指し、これらの点が集まって画像・動画を表示させます。
すなわち100pxは100個の点の集合体のことを示します。

CSSを書く上で、px単位で重要なことは、pxは絶対値の単位指定であるということ。

font-sizeを16pxで指定すると、絶対値指定であるpxはどの幅のWebページでも16pxで表示されます。

px指定は一見理解しやすいので、コーダー側はとっつきやすいですが、Webページ閲覧者は文字サイズを設定などで変更しても絶対値であるが故、文字サイズが変更できません。

故に、文字サイズのpx指定はユーザービリティが低くなる可能性があります。

ではpx指定はどんな時によく使われるのでしょうか。

図形やdiv要素などでコンテナをつくる時に多いですね。用途によって使い分けをすると良いと思います。

単位: em とは

emとは親要素に指定したfont-sizeを基準として数値を決定する相対的な単位です。

由来は大文字の”M”が語源になっているそう。元々レイアウト設計を行う時の組版として、Mが正方形に近いことからMを基準にしていたという背景があった為、emとなったそうです。

では、この”em”。どう言った場面に使うかと言いますと、「部分的にfont-sizeを変えたい時」です。

例えばdiv要素の入れ子にh1タグがあるシチュエーション。
div要素にfont-size:32pxを指定していると、その入れ子h1タグにfont-size:0.5emとすると、h1タグのfont-sizeは”16px”になります。それは”em”の親要素に準拠するという特性で、h1タグの親要素は”divタグ”なのでdivタグが32pxを見に行っているという形です。

正直、自分としてはあまり使うケースがない、この”em”ですが、部分的にfont-sizeを変えたいという時に重宝するかな、と思います。

単位: rem とは

remとはhtmlタグに指定したfont-sizeを基準として数値を決定する相対的な単位です。

由来は”root em”。”root”は「根源、根底」の意味。つまり”根源=html要素”を”em=M(昔の基準の意味)”としますよ、ということです。

この”rem”は非常に使いどきが多いと思います。

html要素を16pxとしていると、どんなに深い構造になったとしてもfont-size: 2remと指定するとhtml要素を見に行くのでfont-size:32pxになります。

もちろん”em”でも構わないのですが、複雑な構成のコーディングになってくると、font-sizeも管理がし辛くなります。メンテナンス面で優位性があるのは、ダントツで”rem”となります。

わざわざ”px”指定ではなく”rem”を指定するのには理由があります。

それは”rem”は相対的な単位だからです。

前述した通り、閲覧ユーザーは個人的に設定で「文字サイズ：大」等にしていると、”px”だと必ず指定した数値＝絶対値なので、「大」にならないのです。

つまり、コーダーがfont-size: 16pxとしていると、閲覧者が”大”と設定しても”font-size: 32px(大)”には変更なりません。その分、”rem”は相対的数値なので、ユーザビリティが高いです。

まとめ

以上が【px】【em】【rem】の単位です。

正直、remの特徴を理解しておけば、font-size指定に苦しまないです。

例えばhtml要素にfont-size:62.5%に指定しておき、以下子要素にremを使うと、すっきりします。

メンテナンス性が本当に高いんですよね。

デフォルトは16pxなのでhtml要素は10pxになり、子要素に2rem等を指定すると20pxになりスッキリします。

font-sizeを決定する時は、この3つが大体使う数値なので、是非頭に入れておきたいです。