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