CSSでのサイズ指定はムズカシイ…　その１

CSSでのサイズの指定については、ググってみると沢山の解説サイトが出てきます。
自分のようにまだまだ勉強中のレベルだと、ほんとにいろいろと迷ってしまいます。で、いろいろ調べて、また混乱する・・・って感じですね。
なので、自分なりに整理してみようと思いましたので、まとめていきます。

今回はサイズ指定の方法、次回はその使い分けをまとめていき、自分の理解を深めていきたいと思いますので、参考にして頂ければ幸いです(笑)

まとめ（CSS 単位、使い分け）

サイズ指定

• px（ピクセル）は絶対値で指定する。
• %（パーセント）は、親要素に対する割合で指定する。
• em（エム）は、親要素のフォントサイズを基準に倍率を指定する。
• rem（レム）は、ルート要素のフォントサイズを基準に倍率を指定する。
• vh（viewport width）とvh（viewport height）は、それぞれviewport（表示領域）の幅（width）もしくは高さ（height）を100とした場合の割合で指定する。

使い分け

• 次回（絶賛まとめ中）

まず最初に「絶対値」と「相対値」

単位には「絶対値」と「相対値」があります。

• 絶対値
  他の要素のサイズなどに左右されず、指定したサイズから変動することがない「固定値」です。
• 相対値
  基準となる要素のサイズによって変わる「変動値」です。

px（ピクセル）※絶対値

画面上の一番小さな単位（１ピクセル＝ほぼ画面１ドット）を基準とした単位です。指定した数値がそのままのサイズになります。
（厳密にはデバイスによって１ドットのサイズは様々ですが）

％（パーセント）※相対値

親要素のサイズを基準に割合（パーセント）で指定する単位です。
当たり前ですが、100%＝親要素と同じサイズになります。

em（エム）※相対値

親要素のフォントサイズを基準とした単位です。
親要素のフォントサイズが20pxであれば、「1em=20px」となります。親要素にフォントサイズが指定されていない場合、デフォルトのフォントサイズ（初期値）の「16px」が基準となります。

rem（レム）※相対値

remは「root em」のことです。ルート要素（htmlセレクタ）のフォントサイズを基準とした単位です。ルート要素のフォントサイズが10pxであれば、「1rem=10px」となります。ルート要素にフォントサイズが指定されていない場合、デフォルトのフォントサイズ（初期値）の「16px」が基準となります。

VW（viewport width）、vh（viewport height）※相対値

viewport（ビューポート）とは？

「viewport」はwebブラウザでwebサイトを閲覧しているときの表示領域（ウィンドウサイズ）のことです。

vwとvh

「vw（viewport width）」
viewportの幅を100とした場合の割合で指定する単位です。表示領域の大きさにより変動します。
viewportの幅が1,200pxの場合、100vh=1,200px、50vh=600pxとなります。

「vh（viewport height）」
viewportの高さを100とした場合の割合で指定する単位です。表示領域の大きさにより変動します。
viewportの高さが800pxの場合、100vh=800px、50vh=400pxとなります。

次回は使い方をまとめていきます。決まった使い方はないみたいですが、いろいろなサイトを見て自分なりにまとめていければと思います。
これまでの記事も、もう一回見直して再編集していこうと思います。