CSS 単位
- 前のページ CSS ウェブサイトレイアウト
- 次のページ CSS 特異性
CSS 単位
CSSには長さを表す様々な単位があります。
多くのCSS属性は「長さ」値を受け入れます。例えば width、margin、padding、font-size など。
長さは、長さ単位が続く数字です。例えば 10px、2em など。
例
px（ピクセル）を使用して異なる長さ値を設定します：
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
数字と単位の間にはスペースを置かないでください。ただし、値が0の場合、単位を省略することができます。
一部のCSS属性では、負の長さを使用することができます。
長さ単位には2種類あります：絶対的な単位および相対的な単位。
絶対的な長さ
絶対的な長さ単位は固定されています。絶対的な長さで表された長さは、そのサイズで正確に表示されます。
スクリーン上で絶対的な長さ単位を使用することは推奨されません。なぜなら、スクリーンのサイズは非常に変動するからです。ただし、出力メディアが既知の場合、それらを使用できます。例えば、印刷レイアウト（print layout）に使用します。
| 単位 | 説明 | TIY |
|---|---|---|
| cm | センチメートル | 試してみてください |
| mm | ミリメートル | 試してみてください |
| in | インチ（1in = 96px = 2.54cm） | 試してみてください |
| px * | ピクセル（1px = 1/96インチ） | 試してみてください |
| pt | ポイント（1pt = 1/72インチ） | 試してみてください |
| pc | パーセンチ（1pc = 12 pt） | 試してみてください |
* ピクセル（px）は視聴デバイスに対して基づいています。低dpiのデバイスでは、1pxはディスプレイの1つのデバイスピクセル（ポイント）です。プリンターや高解像度のスクリーンでは、1pxは複数のデバイスピクセルを意味します。
相対的な長さ
相対的な長さ単位は、他の長さ属性に対しての長さを定義しています。相対的な長さ単位は、異なるレンダリングメディア間のスケーリングがより良い表現をします。
| 単位 | 説明 | TIY |
|---|---|---|
| em | 要素のフォントサイズ（font-size）に基づく（2emは現在のフォントサイズの2倍を意味する） | 試してみてください |
| ex | 現在のフォントのx-heightに基づく（ほとんど使用されない） | 試してみてください |
| ch | 「0」に基づく幅 | 試してみてください |
| rem | ルート要素のフォントサイズ（font-size）に基づく | 試してみてください |
| vw | ビューポートの*幅の1％ | 試してみてください |
| vh | ビューポートの*高さの1％ | 試してみてください |
| vmin | ビューポートの*较小なサイズの1％ | 試してみてください |
| vmax | ビューポートの*较大なサイズの 1％に対して | 試してみてください |
| % | 親要素に対して | 試してみてください |
ヒント：em と rem 単位を使用して、完璧な拡張可能なレイアウトを作成できます！
* ビューポート（Viewport）= ブラウザウィンドウのサイズ。ビューポートが 50 センチメートル幅の場合、1vw = 0.5 センチメートルです。
ブラウザサポート
テーブルの数字は、その長さ単位を完全にサポートする最初のブラウザバージョンを示しています。
| 長さ単位 | |||||
|---|---|---|---|---|---|
| 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 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |
- 前のページ CSS ウェブサイトレイアウト
- 次のページ CSS 特異性
