はじめに
学んだことを忘れないように備忘録として残しています。
間違っている箇所がありましたら、是非ご指摘いただきたいです。
よろしくお願いいたします。
今回はpx, %, vh, vw, em などの単位の意味と使いどころを解説していきます。
絶対的な単位と相対的な単位
今回ご紹介する単位は大きく２種類に分類できます。
絶対的な単位（px)
名前の通り、絶対的に値を指定する
相対的な単位(%, vh, vw, em, rem)
他の要素との比較によって数値が決まる（変動する）
単位一覧と使いどころ
1. px（ピクセル）
画面上の1ピクセル単位。絶対値。
pxの多用はNG。相対的な単位が使えないかを考える。
多用しすぎている例）
.box_wrapper {
width: 1000px;
}
.box {
width: 500px;
}
.box02 {
width: 500px;
}
- 使いどころ
ボタンやアイコンなど、サイズが固定された方がよい部分。
例: アイコンの幅や高さ
2. %（パーセント）
親要素のサイズに対する割合で指定する単位。
- 使いどころ
レイアウトや余白の指定に便利。
例: コンテンツ幅を画面全体の80%にする場合 width: 80%;
3. vw / vh （ビューポートウィズ、ビューポートハイト）
Webブラウザの画面サイズを基準にした相対的な大きさの単位。
画面のサイズを100と考える。
（100vhは、画面の高さ全体を指します。）
- 使いどころ
キービジュアルの全画面背景の高さ調整。
例: height: 100vh;
4. em（エム）
親要素のフォントサイズを基準にした相対単位。
例: 親要素が font-size: 16px; の場合、1em = 16px。
-
使いどころ
1.文字サイズや余白を親要素基準で調整するとき
例: ボタン内の文字サイズ font-size: 1.2em;2.文字の間隔を決めるとき（letter-spacing）
font-sizeと一緒に使われることが多い。
.box {
font-size: 16px;
letter-spacing: 0.1em;
}
5. rem(レム）
htmlタグに指定されたフォントサイズを基準とした相対的な単位
例: 通常ブラウザの初期値は16pxのため、1rem=16px。
- 使いどころ
一貫したデザインに便利。グローバルなフォントサイズや余白に適用。
例: ベースフォントサイズ font-size: 1rem;
まとめ
今回の記事では、Web制作における主要な単位の特徴や使いどころについて解説しました。