CSS 単位 プロパティ 関数 要素 使い方・書き方 例 CSS サンプル
単位 CSS プロパティとは
トピック：CSSには長さ、幅を表現するためのいくつかの異なる単位がある 多くのCSSプロパティは、width、margin、padding、font-size、border-widthなどの値、単位を使う 10px、2emなどの単位の後に続く数字。一部のCSSプロパティでは、負の長さを使用する事ができる 幅、長さ単位には絶対値と相対値の2種類ある。
絶対値
絶対的な単位は固定されており、これらの長さ、幅の単位で表現された正確にそのサイズで表示する 絶対単位は、画面のサイズがそれほど変わるため、画面上での使用はお勧めしない ただし、印刷レイアウトのように、出力メディアが分かっている場合に使用できる
| 単位 | 単位内容 説明 |
|---|---|
cm 詳細 情報cm 例 プロパティ 使い方 コード | centimeters センチメートル |
mm 詳細 情報mm 例 プロパティ 使い方 コード | millimeters ミリメートル |
in 詳細 情報in 例 プロパティ 使い方 コード | inches (1in=96px=2.54cm) インチ - 1インチは2.54cmに等しい |
px 詳細 情報px 例 プロパティ 使い方 コード | pixels (1px=1/96th of 1in)ピクセル単位 - 1pxは0.75ptに等しい |
pt 詳細 情報pt 例 プロパティ 使い方 コード | points (1pt=1/72 of 1in)CSSでは、1ポイントは1/72インチ（0.353mm）と定義される |
pc 詳細 情報pc 例 プロパティ 使い方 コード | picas (1pc=12 pt) 1pcは12ptに等しい |
情報：ピクセル（px）は表示デバイスからの相対値です。低dpiデバイスの場合、1pxはディスプレイの1つのデバイスピクセル（ドット）です。プリンタや高解像度の画面の場合、1ピクセルは複数のデバイスピクセルを意味する
相対値
相対的な幅、長さの単位は、別のプロパティに対する相対的な値を指定。相対的な単位は、異なるレンダリング媒体の間でより良いスケールになる
| 単位 | 単位内容 説明 |
|---|---|
em 詳細 情報em 例 プロパティ 使い方 コード | 要素のフォントサイズ（2emは現在のフォントのサイズの2倍を意味します）に比例 |
ex 詳細 情報ex 例 プロパティ 使い方 コード | 現在のフォントのx-高さ（めったに使用されていない） |
ch 詳細 情報ch 例 プロパティ 使い方 コード | "0"（ゼロ）の幅に対し |
rem 詳細 情報rem 例 プロパティ 使い方 コード | ルート要素のfont-sizeに相対 |
vw 詳細 情報vw 例 プロパティ 使い方 コード | ビューポートの幅の1％に対し |
vh 詳細 情報vh 例 プロパティ 使い方 コード | ビューポートの高さの1％ |
vmin 詳細 情報vmin 例 プロパティ 使い方 コード | ビューポートの小さい方の寸法の1％ |
vmax 詳細 情報vmax 例 プロパティ 使い方 コード | ビューポートの大きい方の寸法の1％ |
% 詳細 情報% 例 プロパティ 使い方 コード | 親要素を基準にして |
- トピック：
emとremのユニットは、完全にスケーラブルなレイアウトを作成するのに便利Viewport=ブラウザのウィンドウサイズ。ビューポートの幅が50cmの場合、1vw=0.5cm
サポートするブラウザ対応・互換性
| 長さ・幅 単位 | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | サポートなし✖ | 19.0 | 7.0 | 20.0 |
