今日から1年の最後の月！

2022年の終わりがだんだん近づいてきましたね！

でも、日本のCOVID-19の終息はなかなか見えてこないんですね…

マスク生活はいつまで続くねん？

そろそろマスク生活から脱却したいのに！

世界のみんなを見たらほとんどマスクしてない人多いわ！

日本だけマスク生活をつつけてたら余計にしんどくならへん？

そろそろ、政府の役員たち、そろそろマスクなしの生活しても大丈夫ですって発令するのいつぐらいになるねん？

海外のみんなもほぼマスクしとらんがな！

医療崩壊するのが怖いだけなんじゃないかな？

さてと、本題に入ろう！

px、em、rem、vw、vh、%の違い

まずは単位の定義についてお話をしよう！

PX

「1920px×1080px」のモニターという表現がされる様に、画面の1ドットを指す数値が「px」です。
「px」は基本どのデバイスであっても、指定サイズで表示されます。
html要素のfont-size値はデフォルトでは16pxです。
親要素にフォントサイズを16pxで指定した場合、PCでもスマホでも16pxの大きさになります。
見え方はモニターの画素数によってバラバラですが、見え方も固定しているのでイメージしやすい特徴があります。

EM

相対単位であり、基準となる指定サイズをベースにして算出されます。
1emが1単位（100%基準）のサイズになります。
親要素が16pxを設定した場合、emの単位が1単位となり、1.5emをPXに変換すると24pxになります。
（16×1.5＝24px）

REM

root要素に対しての 相対サイズ。font-sizeに使う。
例）
:rootにフォントサイズを16pxに設定として1remになり、子要素のフォントサイズが1.5remにした場合、24pxになります。
（16×1.5＝24px）

VW

viewportに対しての相対サイズ (幅）。

VH

viewportに対しての相対サイズ (高さ）。

%

%の算出基準となるのは、親要素プロパティです。
主に、レスポンシブの設定でよく使われます。

使い分けを考慮しながら単位をうまくコントロールをしてみてください。

過去のブログにも紹介したとおり、font-size:clamp( 16px, 1vw, 32px )なども有効ですよ。

では、また！