CSSで使用する単位について
こんにちは！今回のテーマは「CSSで使用する単位について」です。Webサイトのコーディングをするうえでは単位の意味や使いわけが重要になってきます。
①絶対単位と相対単位
まずは絶対単位と相対単位について覚える必要があります。
絶対単位
数値が正確に決められている単位です。ブラウザの表示領域や親要素のサイズに関係なく常に同じサイズのまま長さやサイズを設定できます。
相対単位
ブラウザの表示領域や親要素のサイズと比べながら数値が可変する単位です。何かと比較してサイズが変化するので、レスポンシブサイトを制作するうえでよく使用されています。
②単位の種類
単位の種類はたくさん存在します。全部を紹介するとキリがないので、よく使用される単位を6種類紹介します。
px単位
pxは絶対単位です。表示領域や親要素のサイズに関係なく設定した数値が表示されます。ディスプレイの1つのドットサイズが1pxとなっているので、100pxと設定した場合は、1つのドットが100個並んだサイズで表示されます。
px単位は要素やフォントなどのサイズを固定させたい時に使用します。
%単位
%は相対単位です。親要素のサイズに合わせて大きさが可変します。
たとえば親要素に100pxを設定してその中に90％を設定します。そうすると、
90（設定した%単位）÷ 100（親要素のサイズ）× 100 = 90px
の演算がされて表示されます。
%単位は親要素の中にある要素のサイズを設定する時や、レスポンシブサイトを制作するうえでよく使用されます。
em単位
emは相対単位です。親要素の中で設定したフォントサイズに合わせて、1となります。
たとえば、親要素の中で設定したフォントサイズを20pxとします。その中で1emと設定すると20pxとなります。
1.5emと設定すると20×1.5=30の演算がされ、30pxとなって表示されます。
フォントサイズを設定するだけでなく、marginやwidth、heightを設定も演算分の数値で表示して使用することもできます。
em単位は文字の間隔を設定する時によく使用します。フォントサイズに応じて相対的に文字間を調整してくれるのでオススメです。
rem単位
remは相対単位です。HTMLで設定したフォントサイズに合わせて、1となります。
html{
font-size: 20px; /* 基準になるサイズ */
}em単位と似ていますが、rem単位はHTMLに設定したフォントサイズ、親要素に関係なく設定したフォントサイズの数値で表示されます。なので、HTMLにフォントサイズを20pxと設定し、
2remと設定した場合、emと同じで20px×2=40の演算がされて40pxになり、1.5remと設定した場合は20×1.5=30の演算で30pxになります。
フォントサイズを設定するだけでなくmarginやwidth、heightを設定も演算分の数値で表示して使用することもできます（初期設定は16px）。
rem単位は文字サイズを設定する時によく使用されます。HTMLで設定したフォントサイズが1となるので、計算しやすくなりオススメです。
vw単位
vwは相対単位です。表示領域の横幅サイズによって可変します。
例えば、ウィンドウ横幅の領域が1500pxだったとします。100vwは横幅の領域全体を意味しているので1500pxぶんのサイズを表示してくれます。
1vwは、1500（表示領域の横幅サイズ） ÷ 100 = 15 の演算がされて15pxになります。なので1vwは表示領域の横幅1％を意味しています。
vw単位は横幅の画面サイズを全体を表示させたい時によく使用されます。
vh単位
vhは相対単位です。表示領域の縦幅サイズによって可変します。
例えば、ウィンドウ縦幅の領域が900pxだったとします。100vwは縦幅の領域全体を意味しているので900pxぶんのサイズを表示してくれます。
1vhは、900（表示領域の縦幅サイズ） ÷ 100 = 9 の演算がされて9pxになります。なので1vhは表示領域の縦幅1％を意味しています。
vh単位は縦幅の画面サイズを全体を表示させたい時によく使用されます。
③まとめ
今回CSSで使用する単位について記事にしましたが、まとめてみると…
・絶対単位は、数値が正確に決められていて表示領域や親要素に関係なく常に同じサイズのまま表示させることができる単位である。
・相対単位は、表示領域や親要素のサイズに比較しながら可変する単位である。
・px単位は絶対単位で、1つのドットが1pxとなっている単位である。
・％単位は相対単位で、親要素のサイズに合わせて大きさが可変する単位である。
・％単位は設定した%単位 ÷ 親要素のサイズ × 100 = 答えの演算で表示される。
・em単位は親要素に設定したフォントサイズを基準に1となる単位である。
・em単位は親要素に設定したフォントサイズ × 数字の演算で表示される。
・rem単位はHTMLで設定したフォントサイズを基準に1となる単位である。
・rem単位はHTMLで設定したフォントサイズ × 数字の演算で表示される。
・vw単位は表示領域の横幅サイズによって大きさが可変する単位である。
・vw単位の1vwは表示領域の横幅サイズ ÷ 100 = 答えの演算で1％になる数値である。
・vh単位は表示領域の縦幅サイズによって大きさが可変する単位である。
・vh単位の1vhは表示領域の縦幅サイズ ÷ 100 = 答えの演算で1％になる数値である。
こんな感じだと思います。
この記事を見ていただきありがとうございました！
参考にしたサイト
この記事が気に入ったらサポートをしてみませんか？