【CSSの単位まとめ】 px, em , remなどの絶対、相対長さ単位

フォームの高さが合わない、、、だと、、、、

あまりCSSを利用しないのでデフォルトのまま利用をしていた。

そして、ある入力フォームで他のフォームとの高さの違いが出た。

それを微調整する時に出てきた単位

それが
em,remだった。

全く知らなかったのでこの際、単位ってどんだけあるのか探る。

1. CSS における単位の基本

CSS で要素のサイズやフォントサイズなどを指定するとき、
必ず「どの基準でどのくらいの長さを示すのか」を指定する必要がある。
これが “単位 (Unit)”。分けると2種類。それが下記になる。

1. 絶対長さ単位 (Absolute length units)
   物理的な長さと対応している（と定義されている）単位。
   実際の表示はディスプレイ解像度やブラウザが内部的に持つ換算ルールによって
   変化する

2. 相対長さ単位 (Relative length units)
   親要素やビューポートのサイズなど別の基準に対して相対的にサイズが決まる単位

2. 絶対長さ単位

px

• 意味:
  • ピクセル (pixel)
• 特徴:
  • 他の絶対単位に比べて、Web 制作では最もよく使われる
  • 一般的に1 ピクセル = 物理画素 1 つ
  • サイズが固定されているため、ユーザーがデフォルトフォントサイズを変更しても
    そのままの大きさを保ちやすい。反面、拡大縮小やアクセシビリティの面では
    柔軟性が下がる

in

• 意味:
  • インチ (inch)
• 特徴:
  • 1in = 2.54cm = 96px
  • 紙媒体のサイズ指定などで実際の物理寸法で用いられる
    Web 画面上ではほとんど使われない 単位

cm / mm

• 意味:
  • センチメートル (centimeter) / ミリメートル (millimeter)
• 特徴:
  • 1cm = 10mm
  • 1cm = 37.8px
  • 1mm = 3.78px
  • 印刷を前提としたレイアウト（プリントや PDF）で使われる
    ブラウザ上の画面表示ではあまり用いられない

pt / pc

• 意味:
  • ポイント (point) / パイカ (pica)
• 特徴:
  • 1pt = 1/72in (約 0.3527mm)
  • 1pc = 12pt
  • 印刷業界でよく使われる単位。印刷用や PDF 出力の際には有効。
    Web ページとしてはあまり使用されない ことが多い

---

3. 相対長さ単位

em

• 意味:
  • 親要素 (または自身) のフォントサイズ に対する相対値
  • “em” の挙動としては
    「親要素のフォントサイズ × 何倍か」を示す
• 特徴:
  • font-sizeを 1em と書いた場合、親要素のフォントサイズを 100% として参照
    • 例: 親要素が font-size: 16px; → 子要素で font-size: 1.5em; → 24px 相当
  • ネスト（他の要素の中に含まれる入れ子状態な構造）が深いと計算が複雑になりやすい

rem

• 意味:
  • ルート要素 (html) のフォントサイズ を基準にした相対単位
  • “rem” は “root em” の略称
• 特徴:
  • ルート要素（html）に指定した font-size に対して相対値を決める
    • 例: html { font-size: 16px; } → font-size: 2rem; は常に 32px
  • ネストの影響を受けず一貫性がある。全体の統一管理に便利

%

• 意味:
  • 親要素に対するパーセント 指定
• 特徴:
  • 幅（width）を % で指定すると、親要素の幅に対して相対的に決まる
  • フォントサイズを % で指定した場合、親要素のフォントサイズを基準にする
    （事実上、em に近い）
  • レスポンシブデザインで親要素の大きさに合わせて伸縮するレイアウトに有効

vw / vh / vmin / vmax

• 意味:
  • vw: ビューポートの幅 (viewport width) に対する 1%
  • vh: ビューポートの高さ (viewport height) に対する 1%
  • vmin: vw と vh のうち、より小さい 値
  • vmax: vw と vh のうち、より大きい 値
• 特徴:
  • ビューポート = ブラウザの表示領域
    • 例: width: 50vw; は、画面幅の 50% の幅を指定する
  • フルスクリーンの背景や、画面サイズに合わせた可変レイアウトで便利

その他の相対単位（ex, ch など）

• ex
  • 現在のフォントにおける小文字の “x” の高さ（x-height）を基準とする
  • フォントによって異なるので扱いが難しい
• ch
  • 数字の “0” の幅を基準とする（glyph width）
  • 等幅フォントであればある程度信頼できる。がフォントによる

実際の Web 制作 にはレスポンシブやアクセシビリティを意識する必要があるから相対単位を中心に制作がメインになってくるわけだね。きっと。