最終更新日:
公開日:
基礎
CSS
CSSで指定することができる要素のサイズ単位
CSSで使うことができる長さやサイズの単位について、それぞれの特徴を解説します。
この記事のポイント
- CSSで使用できる長さやサイズの単位が分かる
- 周りの要素に対して相対的なサイズと、影響されないサイズが分かる
目次
様々なサイズ単位
フォントやHTML要素のサイズなど、サイズを指定するシーンは様々です。
サイズ指定はビューポート(表示サイズ)や親要素を基準にするなど様々ですが、CSSでは用途に応じたサイズ指定を行えるように、単位のバリエーションをたくさん用意しています。
大きく分けると親要素のサイズに影響される「相対的なサイズ」と、影響されない「絶対的なサイズ」に分けられます。
絶対的なサイズ
親要素などに影響されないサイズ指定を行うための単位です。
絶対的なサイズを指定すると、子要素の基準サイズになります。
単位 | 名前 | 長さ |
---|---|---|
px | pixels ピクセル | 画面の1ピクセル = 1px。 Retinaでは0.5px単位で指定可能だが、Chromeなどブラウザによって小数点は強制切り下げ。 |
cm | centi meters センチメートル | 1cm = 96px/2.54。 100px = 2.64cm。 |
mm | milli meters ミリメートル | 1mm = 1cmの1/10。 100px = 26.4mm。 |
Q | quarter-milli meters 4分の1ミリメートル | 1Q = 1mmの1/4。 100px = 105.6Q。 Safari未対応。 |
in | inches インチ | 1in = 2.54cm = 96px。 100px = 1.04in。 |
pc | picas パイカ | 1pc = 1インチの1/6。 100px = 6.24pc。 |
pt | points ポイント | 1pt = 1インチの1/72。 100px = 74.8pt。 |
より詳しくは、次のW3Cの仕様書のうち「Absolute lengths」をご覧ください。
CSS Values and Units Module Level3 – W3C(英語)
相対的なサイズ
親要素や表示環境によって長さが変化します。
親要素でサイズを指定していない場合は、次の親要素へと遡っていき、最終的にルート要素のサイズを基準に相対的なサイズをとります。
単位 | 名前 | 長さ |
---|---|---|
em | element | 1em = 1文字分のサイズ。 |
ex | element x-height | フォントの高さを基準にしたサイズ。 ほとんどのフォントでは1ex = 0.5em。 |
ch | mchracter unit | 0(ゼロ)の幅を単位としたグルフの幅。 |
rem | root element | 1rem = ルート要素のフォントサイズ(親要素ではない)。 |
vw | viewport width | ビューポート(表示幅)を基準にした単位。 1vw = 表示幅の1/100。 表示幅いっぱいに表示したいときは100vw、表示幅の半分は50vwとなります。 |
vh | viewport height | ビューポート(表示の高さ)の高さを基準にした単位。 1vh = 表示高さ1/100。 表示の高さいっぱいにしたいときは100vh、表示できる高さに対して半分の高さで表示するなら50vh。 |
vmin | viewport’s minimum | ビューポート(表示できる広さ)の幅と高さのうち、いずれか小さい方を基準にした高さ。 例えば幅1,200px、高さ700pxの場合は高さ700pxを基準にする。 |
vmax | viewport’s maximum | ビューポート(表示できる広さ)の幅と高さのうち、いずれか大きい方を基準にした高さ。 例えば幅1,200px、高さ700pxの場合は幅1200pxを基準にする。 |
% | Percent | 親要素に対する相対的なサイズ。 例えば親要素の幅が1000pxであれば、子要素で「width: 50%;」を指定すると500pxになる。 |
より詳しくは、次のW3Cの仕様書のうち「Relative lengths」をご覧ください。
CSS Values and Units Module Level3 – W3C(英語)
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。