RaiseTechのReactコースの課題「ToDo アプリ」を作るにあたって、まずはCSSについて知っておかねばなるまい。
今回はCSS単位について。
px とか rem とか em とか一体ナニモノなんだよ？っていう話。
とりあえず、課題に必要そうなものだけピックアップしておく。
相対値と絶対値
CSS単位は、相対値と絶対値に分類できる。
px(ピクセル)は、画素なので、絶対値。1pxはどんな時も1px。
一方、rem / em / % などは何かを基準とした相対値なので、基準が変わればサイズも変わる。
px
ピクセル、画素。
絶対値なので、サイズはpxで指定したものはすべて同じ大きさ。
あくまでも、同じ解像度・同じ画素数という条件下では、という話になるが。
em と rem
em・・・エム(親要素のフォントを基準とした文字サイズ)
rem・・・レム、root em(ルート要素のフォントを基準とした文字サイズ)
em は基準とするのは親要素で、remが基準とするのはルート(最上位階層)要素である。
つまり、入れ子になっていたり、複雑な構造になっている場合は、em を使うのは難しい。(基準が1つのほうが、全体的にサイズをコントロールしやすい)
ちなみに、ルートに何も指定しない場合は、16pxらしい。
％
パーセント。
これも親要素を基準として、サイズをパーセントで表したもの。
サイズ感については、このくらいわかっておけば大丈夫かな？
あとは必要に応じて、都度学習する。
