CSSによるサイズ指定(単位)と使い分け1

HTML&CSS

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

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

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

まとめ(CSS 単位、使い分け)

サイズ指定

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

使い分け

  • 次回(絶賛まとめ中)

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

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

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

px(ピクセル)※絶対値

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

%(パーセント)※相対値

親要素のサイズを基準に割合(パーセント)で指定する単位です。
当たり前ですが、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となります。

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

コメント