様々な単位とその特徴

CSSでは様々な単位を使用します。
ここでよく使う単位の特徴と、主な活用シーンを見直していきたいと
思います。
結構分かっている様で、曖昧な所があるので今回は

『HTML＋CSS コーディングの強化書』

この本を使いながら、勉強していこうと思います。

★　px　(ピクセル）

スクリーンの1ピクセルの長さを1とした単位です。レスポンシブサイトであっても固定サイズで表示したい箇所全般に広く使用されますが、文字サイズに指定した場合、ブラウザの文字サイズ変更機能が効かなくなるというユーザビリティ的な問題が生じます。

★　％　(パーセント）

割合を表す単位です。幅、高さ、余白、位置などのサイズを親要素を基準として相対的な割合で指定し、ブラウザ幅が変動しても指定した割合を維持したまま伸縮する状態を作ることができます。可変レイアウトを作る場合の主要な単位となりますが、
・適用するプロパティによって親要素の何のサイズを基準とするのかが微妙に異なる
・要素が入れ子になっている場合は計算が複雑になる可能性があるといった　クセがあるので、どこのサイズを基準として％値を算出しているのかよく考えて使用する必要があります。

★　em　(エム）

親要素の指定・継承されている文字サイズ(大文字Mの高さ＝全角1文字分)　を基準とした単位です。その時々の文字サイズに連動するようなサイズ指定をしたい場合に重宝する単位ですが、emは親要素の文字サイズを基準としているため、em指定の要素が入れ子になった場合は計算が複雑になるので注意が必要です。

★　rem　(レム）

ルート要素　(htmｌ要素）で指定されている文字サイズを基準とした単位です。多くのブラウザでルートの標準文字サイズは16pxに設定されているため、何もしなければ1rem=16pxとして計算されます。
　常にルート要素の文字サイズを参照してサイズ計算され、ブラウザ幅が変動したり要素が入れ子になったりしても常に一定の固定値で表示されるため、一見するとpx指定したのと同じように見えますが、remはブラウザの設定で文字サイズだけ変更する機能を無効にしないという大きな違いがあります。