CSSで使用できる単位

カテゴリ:CSS

CSSのmarginやpadding、height、widthなどで使用できる単位、値をまとめてみました。

よく使われる単位

主に使用される単位は以下となり、殆どの場合、pxem%での指定になるでしょう。
単位 読み方 説明 単位の種類
px ピクセル 1ピクセルは1ドットに相当 絶対単位
em エム 1emは対象要素の1文字分の高さ

要素の文字サイズでemの長さは決まる
em(エム)は大文字のMの高さを基準にしたことから命名されたもの

相対単位
rem ルートエム 1remはルート要素(html要素)の1文字分の高さ

ルート要素の文字サイズでremの長さは決まる

相対単位
% パーセント 要素の最大サイズを100%として、その何パーセントかで表す

入れ子になっている親要素のサイズや対象要素のmarginなどの値によって最大サイズは決まる

相対単位
auto オート 適切なサイズに自動調整(初期値) 自動調整

その他の単位

以下の単位は一般的ではありませんが、予備知識としてこういった単位もある事は覚えておいて損はないでしょう。
単位 読み方 説明 単位の種類
ex イーエックス 1exは対象要素のx-heightの1文字分の高さ emの半分となり、1exは2em

x-heightの文字サイズでexの長さは決まる
x-heightは小文字のxの高さを基準にしたことから命名されたもの

相対単位
in インチ 1inは96px 絶対単位
cm センチメートル 1cmは約37.80px 絶対単位
mm ミリメートル 1mmは約3.78px 絶対単位
pt ポイント 1ptは約1.33px 絶対単位
pc パイカ 1pcは16px 絶対単位

公開日時: 2019年06月15日  22:25:20

本格的なスキルを身につける

オンラインによるWebプログラミングスクールの無料レッスンを受けてみたい方はTechAcademyの無料体験がおすすめですよ。

CSSに戻る

「CSS」に関する他のTips

このページのトップに戻る