初心者でもわかる！CSSの単位について

Webページを装飾する上で必須なのがCSS。

今回はCSSで使用する単位についてコーディング初心者の方でもわかるように解説します！

ぜひ、最後まで見ていってください！

CSSで使用する主な単位と基本のルール

CSSで使用する単位は様々ありますが、今回は以下の頻繁に使用する単位について解説します。

数値の後には必ず単位を使用しなければいけませんが、値が「0」の場合は必要ありません。

数値の後にはスペースを入れずに単位を記述しないとエラーになります。

また、大文字でも小文字でも問題ありませんが、一般的には小文字で記述します。

px (ピクセル)

「px」はコーディングをする上で一番使用する単位と言えるでしょう。

1px=1ドットまたは1/96インチの絶対値となるので、他の要素に影響を受けることなく数値を指定することができます。

柔軟性に欠けるため、修正する際やレスポンシブ対応に不便というデメリットがありますが、数値を固定したい場合には便利です。

% (パーセント)

「%」は親要素によって相対的に変動する値です。

使用した要素以外に、別の要素が影響してくるので、初めは使いづらいと感じるかもしれませんが、レスポンシブ対応のデザインの場合にとても役立ち、メンテナンスがやりやすくなります。

em (エム)

「em」は親要素のフォントサイズを基準とした相対的な単位になります。

親要素にフォントサイズの指定がなければ、htmlのデフォルトのフォントサイズ16pxが基準となります。

「親要素のフォントサイズの何倍か」という指定の仕方をし、例えば親要素のフォントが32pxであれば2em=64pxです。

ボタンのサイズや余白、特定の要素内などの部分的な文字のサイズ変更などに重宝します。

rem (レム)

「rem」はルート要素のフォントサイズの相対値になります。

ルート要素とはhtmlのフォントサイズのことなので、「htmlのフォントサイズの何倍か」を表す単位ということになります。

htmlのフォントサイズの初期値は16pxなので、1rem=16pxです。

「%」や「em」が親要素に依存してしまうのに対して、「rem」は依存せずに相対的にフォントサイズを設定できるという強みがあります。

vw (ビューポートの幅)

「vw」はビューポートの幅に対する相対値を設定する単位になります。

画面幅が1366pxの場合、1vw=13.66pxとなります。

ウィンドウの幅によって数値が変わるので、レスポンシブ対応のWebページに使用されます。

スクロールバーの幅もビューポートの幅に含まれてしまうので、画面幅いっぱいの100vwを指定するとスクロールバーの幅分はみ出してしまうので、注意が必要です。

vh (ビューポートの高さ)

「vh」はビューポートの高さに対する相対値を設定する単位になります。

画面の縦幅が768pxの場合、1vh=7.68pxとなります。

「vw」と同様、レスポンシブ対応のWebサイト作成時に役立ちますが、メニューバーの幅も100vhには含まれてしまうので、画面幅いっぱいに設定したい場合には気を付けましょう。

px、%、rem、vw、vhの違いと使い分けかた

紹介してきたCSSの単位にはそれぞれ適した使用方法があります。

上手く使い分けて効率的で整ったコーディングができるようになりましょう。

可変させたくない要素はpx

図形や線などの可変させたくない要素には「px」を使用するのが適しています。

絶対値である「px」はレスポンシブ対応した場合にはみ出る場合もあるので、デバイスのサイズによって「px」を変える必要があるので注意しましょう。

フォントサイズはrem

「rem」はフォントサイズを設定する場合に最適です。

「em」や「%」は親要素に依存しているので、部分的に変更する必要が出てしまう一方、「rem」はhtmlタグのフォントサイズに依存しているので、htmlタグのフォントサイズを変えるだけで一度に「rem」で指定したフォントのサイズを変更することができ、修正の手間が省けます。

レイアウトのサイズは%

「header」や「body」などのレイアウトの部分の設定には「%」が適しています。

「header」や「footer」などの画面幅いっぱいに表示させたい要素は100%で指定すると画面幅が変わっても対応できます。

また、「flex-box」や「table」の「container」など等分にしたいものにも「%」指定が便利です。

フォントサイズに合わせて相対的に可変させる要素はem

「em」は親要素のフォントサイズに依存するので、特定の要素内のフォントサイズを変更したい場合やフォントサイズに合わせて相対的に可変させると綺麗に表示できる要素に適しています。

例えば、文章内の強調する部分に「em」を指定しておけば、親要素のフォントサイズに合わせて可変します。

また、「padding」や「margin」、「letter-spacing」などのフォントサイズに合わせて調整するものに「em」を使用しておけば、部分的に変更する必要がなくなります。

画面幅に占有する要素はvw

モーダルウィンドウ(元のウィンドウの上に別のウィンドウを表示させる)やヒーローイメージ(ファーストビューなどを画面いっぱいに表示させる)など画面幅を基準にする要素を設定する場合には「vw」が便利です。

まとめ

今回は基本的なCSSの単位について説明しました。

いかがだったでしょうか？

単位をうまく使うことでレスポンシブ対応した場合に崩れるのを防げます。

別投稿では、HTML/CSSについての基本知識や、コーディングに役立つ知識についてご紹介していますので、そちらもぜひチェックしてみてください！