cman.jp > WEBページ作成TOP > その他 > パス(path)指定
CSSの長さ、大きさを表す単位/変換
CSSで長さ「width」「height」など、大きさ「font-size」など、位置「margin」「padding」「top」「right」「bottom」「left」など、太さ「border」など、角度「border-radius」などを指定する場合、色々な単位を使用することができます。
ただし「border」で「%」に指定しても無効となるなど、CSSによっては使用できない単位もありますのでご注意ください。
サイズ、大きさの単位記述方法
サイズ、大きさの単位は「絶対サイズ（絶対単位）」と「相対サイズ（相対単位）」の2つに分かれます。
「相対サイズ（相対単位）」は親要素に適用されている値を元に「70%」などの相対値を指定します。
| 単位と意味 | ||
|---|---|---|
絶 対 サ イ ズ |
px |
ピクセル たとえば、Windowsの標準文字（ピクセル密度が「96dpi」）を使用している場合 たとえば、Windowsの拡大文字（ピクセル密度が「144dpi」）を使用している場合 |
| pt |
ポイント |
|
| cm | センチメートル | |
| mm | ミリメートル | |
| in | インチ ( 1in ＝ 2.54cm ) | |
| pc | パイカ ( 1pc ＝ 1/6インチ ＝ 4.233mm ) | |
| ※「1インチは96px」で定義されているため、ピクセル密度が96dpi以外の解像度の場合は、実際に表示される大きさが変わります。 | ||
相 対 サ イ ズ |
% | 要素に適用されているサイズ・大きさに対する倍率 |
| em | 要素に適用されているfont-sizeを「1」としたの倍数 | |
| rem |
ベースのフォントサイズ（htmlのフォント）を基準とした相対指定となります。 ページのベースフォントサイズが16pxの場合、対象の要素に適用されているフォントサイズに関わりなく「0.7rem」とすると[ |
|
| ex | 要素に適用されているfont-sizeで「x」(英小文字)の高さを「1」とした倍数 | |
| 他 | vw,vh,vmin,vmax,ch,gdなどの単位があります | |
|
設定する値が「0」の場合は、単位は不要なる。 |
||
サンプル
1.絶対サイズのサンプル
| 指定サイズ | font-size | width,height | 96dpiの場合の大きさ |
|---|---|---|---|
| 40px | ABCx | 40px ÷ 96dpi ≒ 0.417インチ 0.417インチ × 2.54cm ≒ 1.06cm | |
| 30pt | ABCx | 2.57cm ÷ 72 × 30 ≒ 1.06cm | |
| 1cm | ABCx | 1cm | |
| 8mm | ABCx | 0.8cm | |
| 0.5in | ABCx | 2.54cm × 0.5インチ ＝ 1.27cm | |
| 2.5pc | ABCx | 2.54cm ÷ 6 × 2.5パイカ ≒ 1.06cm |
2.相対サイズのサンプル
| 指定 | font-size | width,height | 96dpiの場合の大きさ | |
|---|---|---|---|---|
| 要素の適用の フォントサイズ |
ABCx | 以下の各要素には20ptのフォントが適用されている | ||
| 70% | ABCx | font-sizeは「20pt × 70%」 width,heightは、枠に対して70% |
||
| 1.5em | ABCx | font-size,with,height共に 「20pt × 1.5」 |
||
| 1.5rem | ABCx | font-size,with,height共に 当ページのベースフォントサイズ：10pt を基準に「10pt × 1.5」 |
||
| 2.5ex | ABC | 20ptの「x」の高さ × 2.5 | ||
単位の変換・自動計算
以下に変換（計算）元の値を入力すると各単位の換算値が表示されます。(ピクセル密度を96dpiで計算）
| px | - | - |
|---|---|---|
| pt | - | |
| cm | - | |
| mm | - | |
| in | - | |
| pc | - |
留意事項
1.実際の大きさ
絶対サイズで指定した場合でも実際に画面の解像度により大きさは変わります。
パソコンとスマートフォンではピクセル密度が違うため、パソコンで1cmで見えていてもスマートホンでは0.4cm程度になったりします。
解像度（ピクセル密度）は機種やユーザ設定によりまちまちで、全てで同じ大きさで表示することは出来ません。
2.相対サイズの注意
相対サイズは要素に適用されている値をベースに計算されます。（remを除く）
このため、想定よりも大きくなったり小さくなったりすることがあるので注意が必要です。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<style type="text/css">
html {
font-size: 40px;
}
p {
margin:0;
padding:5px;
}
</style>
</head>
<body>
<p>BODYは【font-size:40px】</p>
<div style="font-size:0.6em;border: 1px solid #333;padding:10px">
<p>ここは【font-size: 0.6em】「40px × 0.6em ＝ 24px」</p>
<div style="font-size:0.6em;border: 1px solid #333;padding:10px">
<p>ここは【font-size: 0.6em】「24px × 0.6em ＝ 14.4px』</p>
</div>
<div style="font-size: 0.6rem;border: 1px solid #333;padding:10px">
<p>ここは【font-size: 0.6rem】「40px × 0.6em ＝ 24px」</p>
</div>
</div>
</body>
</html>