HTML：サイズ

px

略

pt

• 1pt = 1/72インチ
• 主に印刷物基準の単位
• Webでは px に換算される（ブラウザ依存だが概ね 1pt ≒ 1.333px）
• 例：

ex.css

font-size: 12pt;

cm

• 1インチ = 2.54cm
• Web表示では物理サイズ通りにならない場合が多い（画面DPI依存）
• 印刷向き
• ページ余白指定などに使用
• 例：

Ex.css

margin: 2cm;

vw（viewport width）＆vh（viewport height）

• 1vw = 画面の幅の1%
• 1vh = 画面の高さの1%
• ブラウザ表示領域基準
• スクロール関係なし
• 親要素が何であろうと関係ない
• 画面幅に比例してフォントが拡大縮小
• 例：

Ex.css

width: 100vw;/*画面いっぱいの幅*/

Ex.css

height: 100vh;/*画面いっぱいの高さ*/

%

• 親要素に対する割合＝親の高さが指定されていないと意味がない
• レスポンシブ設計の基本単位
• 何に対する割合かはプロパティによって変わる

Ex.css

width: 50%;/*親要素の幅の50%*/
font-size: 120%;/*親要素のフォントサイズの120%*/

グリッド・カラムやカード幅でよく使う

rem

• root要素（html）のフォントサイズ基準
• 例

Ex.css

html {
  font-size: 16px;
}

.box {
  font-size: 2rem;
}

→ .boxのフォントサイズは32px（常に）
→親が何であろうと影響を受けない

em

• その要素の「現在のフォントサイズ」基準
• 例

Ex.css

.parent {
  font-size: 20px;
}

.child {
  font-size: 2em;
}

→ childのフォントサイズ は 40px
また、emは「継承の連鎖」によって増幅する

EX.css

.parent {
  font-size: 20px;
}

.child {
  font-size: 2em;   /* 40px */
}

.grandchild {
  font-size: 2em;   /* 80px */
}

これを ネスト増幅問題 と呼ぶこともある