CSSで使用できる単位
カテゴリ:CSS
CSSのmarginやpadding、height、widthなどで使用できる単位、値をまとめてみました。よく使われる単位
主に使用される単位は以下となり、殆どの場合、pxかem、%での指定になるでしょう。
単位 | 読み方 | 説明 | 単位の種類 |
---|---|---|---|
px | ピクセル | 1ピクセルは1ドットに相当 | 絶対単位 |
em | エム | 1emは対象要素の1文字分の高さ 要素の文字サイズでemの長さは決まる |
相対単位 |
rem | ルートエム | 1remはルート要素(html要素)の1文字分の高さ ルート要素の文字サイズでremの長さは決まる |
相対単位 |
% | パーセント | 要素の最大サイズを100%として、その何パーセントかで表す 入れ子になっている親要素のサイズや対象要素のmarginなどの値によって最大サイズは決まる |
相対単位 |
auto | オート | 適切なサイズに自動調整(初期値) | 自動調整 |
その他の単位
以下の単位は一般的ではありませんが、予備知識としてこういった単位もある事は覚えておいて損はないでしょう。
単位 | 読み方 | 説明 | 単位の種類 |
---|---|---|---|
ex | イーエックス | 1exは対象要素のx-heightの1文字分の高さ
emの半分となり、1exは2em x-heightの文字サイズでexの長さは決まる |
相対単位 |
in | インチ | 1inは96px | 絶対単位 |
cm | センチメートル | 1cmは約37.80px | 絶対単位 |
mm | ミリメートル | 1mmは約3.78px | 絶対単位 |
pt | ポイント | 1ptは約1.33px | 絶対単位 |
pc | パイカ | 1pcは16px | 絶対単位 |
公開日時:2019年06月15日 22:25:20