【CSS】よく使う単位のまとめ
初めに
CSSグリッドを学ぶなかで、「fr」という初めて見る単位が出てきたので、
よく使う単位についてまとめ、今後、何をいつ使うかを分かりやすくしておきます。
早見表
| 単位 | 区分 | 基準 | 使い道 |
|---|---|---|---|
| px | 絶対長 | 幅を固定したい場合など | |
| pt | 絶対長 | 1px = 0.75pt | 使うことはない |
| % | 相対長 | 通常、親要素のサイズ | 要素のサイズに応じて変化させたいとき |
| em | 相対長 | 割り当てられる font-size | １行あたりの文字数を指定したいとき |
| rem | 相対長 | ルート要素のfont-size | 他のfont-sizeの設定に使うことが多いそう |
| vw・vh | 相対長 | 画面のサイズ | 画面の縦 又は 横 全体に表示したい場合 |
| vmin・vmax | 相対長 | 画面の横幅と縦幅 | スマホの縦持ち、横持ちでの変化に合わせたい場合 |
| fr | 相対長 | グリッドコンテナー中の余りのスペース | CSSグリッドで、スペースを均等に配分したい場合 |
単位の基本
単位といえば、
- px
- %
- vh・vw
- em
がよく使われるイメージです。
CSSには、数値データ型がいくつかあり、上記のような単位は、
dimension タイプの内の length タイプに分けられます。
この length タイプは、以下の２つに区分されます。
- 絶対長の単位：px のように常に同じサイズの単位
- 相対長の単位：% や em のように他の要素に応じてサイズが変化する単位
絶対長の単位：一覧
MDN (絶対長の単位)
Unit 名前 換算 cm Centimeters センチメートル 1cm = 96px/2.54 mm Millimeters ミリメートル 1mm = 1/10 cm Q Quarter-millimeters 1/4 ミリメートル 1Q = 1/40 1cm in Inches インチ 1in = 2.54cm = 96px pc Picas パイカ 1pc = 1in の 1/6 pt Points ポイント 1pt = 1in の 1/72 px Pixels ピクセル 1px = 1in の 1/96
相対長の単位：一覧
MDN (相対長の単位)
単位 関係先 em https://developer.mozilla.org/ja/docs/Web/CSS/font-size のようなタイポグラフィについての特性の場合は親のフォントサイズ、https://developer.mozilla.org/ja/docs/Web/CSS/width のような他の特性の場合は要素自体のフォントサイズ。 ex その要素のフォントの文字 "x" の高さ。 ch その要素のフォントの文字 "0" の advance measure（幅）。 rem ルート要素のフォントサイズ。 lh その要素の行の高さ。 rlh ルート要素の行の高さ。ルート要素の https://developer.mozilla.org/ja/docs/Web/CSS/font-size または https://developer.mozilla.org/ja/docs/Web/CSS/line-height プロパティに使用する場合、プロパティの初期値を参照する。 vw ビューポート幅の 1%。 vh ビューポート高さの 1%。 vmin ビューポート幅と高さの小さい方の 1%。 vmax ビューポート幅と高さの大きい方の 1%。 vb ルート要素のhttps://developer.mozilla.org/ja/docs/Web/CSS/CSS_logical_properties_and_values#block_vs._inlineに、最初に含むブロックの大きさの 1%。 vi ルート要素のhttps://developer.mozilla.org/ja/docs/Web/CSS/CSS_logical_properties_and_values#block_vs._inlineに、最初に含まれるブロックの大きさの 1%。 svw, svh それぞれ、https://developer.mozilla.org/ja/docs/Web/CSS/length#relative_length_units_based_on_viewportの幅と高さの 1%。 lvw, lvh それぞれ、https://developer.mozilla.org/ja/docs/Web/CSS/length#relative_length_units_based_on_viewportの幅と高さの 1%。 dvw, dvh それぞれ、https://developer.mozilla.org/ja/docs/Web/CSS/length#relative_length_units_based_on_viewportの幅と高さの 1%。
px
デジタル画像を構成する最小単位の「ピクセル(画素)」を１とする単位です。
相対長の単位で計算された値は、大体 px 単位になります。
使い道：レスポンシブなレイアウトでは、幅を固定したい場合など
em
font-size を基準とする単位です。
font-sizeの指定に使えば、親要素のfont-sizeを基準にし、
font-size以外の指定に使えば、自身の要素のfont-sizeを基準にします。
計算方法：font-size × 指定した値
/* 親要素のfont-size × 10 */
font-size: 10em;
/* 自身の要素のfont-size × 40 */
width: 40em;
使い道：文章を内包している要素において、１行あたりの文字数を指定したいとき
rem
ルート要素(html 要素)のフォントサイズを基準とする単位です。
ルート要素のフォントサイズは、16px がデフォルト値として決まっています。
しかし、
:root {
font-size: 14px;
}
と、変更した場合は、その値が基準となります。
使い道：フォントサイズの設定に使うことが多いそうです。
%
通常は、親要素の幅・高さを基準とし、設定した割合を px とする単位ですが、プロパティに応じて基準とする値が変化します。
「CSSのサイズ指定時の単位について、というか%について詳しく述べる」
というブログ記事を基に考えると、
- font-size：割り当てられている font-size の大きさを基準 (emと同じ挙動)
- width・height・margin・padding：親要素の幅・高さを基準
- position absolute：relative が指定されている要素の幅・高さを基準
- transformプロパティのtranslate：自身の幅・高さを基準
の４つにまとまります。
使い道：親要素のサイズ変化に伴って、自身のサイズも変化させたいとき
vh・vw
親要素や祖先要素に縛られず、画面のサイズを基準とする単位です。
vh：画面の高さを基準
vw：画面の横幅を基準
計算方法：画面サイズ × (設定した数値 ÷ 100)
vhはスマホのブラウザで使用した場合、アドレスバーも高さに含まれる。
vwはスクロールバーが幅に含まれる。
そのため、無駄なスクロールが発生する可能性があることに注意
使い道：ナビゲーションボタンをクリックした際に、画面全体にナビゲーションメニューを表示する場合
vmax・vmin
画面の横幅と縦幅を基準とした単位です。
vmax：どちらか広い方を基準
vmin：どちらか狭い方を基準
使い道：スマホの縦持ち、横持ちでの変化に合わせたい場合
fr
CSSグリッドで使用する単位です。
グリッドコンテナー中の余りのスペースを基準とします。
grid-template-columns: 1fr 1048px 1fr;
このとき、画面全体から1048px除いたスペースを１対１の比率で分割したサイズが、それぞれの1frに割り当てられます。
使い道：CSSグリッドで、スペースを均等に配分したい場合
参考資料
Discussion