WEBページ作成リファレンス
cman.jp 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

ピクセル
パソコンなどの画面に表示できる最小単位(ドット)となります。
100pxは100個のドットが並んだサイズとなります。

たとえば、Windowsの標準文字(ピクセル密度が「96dpi」)を使用している場合
100pxは、100px ÷ 96dpi ≒ 1.04インチ ≒ 2.65cm

たとえば、Windowsの拡大文字(ピクセル密度が「144dpi」)を使用している場合
100pxは、100px ÷ 144dpi ≒ 0.69インチ ≒ 1.76cm

pt

ポイント
パソコンのoffice(ExcelやWordなど)の文字サイズで使用されている単位です。
1ptは1/72インチ、2.54cm ÷ 72 ≒ 0.3528mm (*1)

cm センチメートル
mm ミリメートル
in インチ ( 1in = 2.54cm )
pc パイカ ( 1pc = 1/6インチ = 4.233mm )
※「1インチは96px」で定義されているため、ピクセル密度が96dpi以外の解像度の場合は、実際に表示される大きさが変わります。
% 要素に適用されているサイズ・大きさに対する倍率
em 要素に適用されているfont-sizeを「1」としたの倍数
rem

ベースのフォントサイズ(htmlのフォント)を基準とした相対指定となります。
※CSS3.0で追加のため、IE8など古いブラウザでは利用できません。

ページのベースフォントサイズが16pxの場合、対象の要素に適用されているフォントサイズに関わりなく「0.7rem」とすると[
12px(16px × 0.75)」となります。

ex 要素に適用されているfont-sizeで「x」(英小文字)の高さを「1」とした倍数
vw,vh,vmin,vmax,ch,gdなどの単位があります

設定する値が「0」の場合は、単位は不要なる。
また、「0.8em」など「1以下」の場合は「.8em」と先頭の「0」を省略できる。

ページTOP

サンプル

1.絶対サイズのサンプル

指定サイズfont-sizewidth,height96dpiの場合の大きさ
40pxABCx
 
40px ÷ 96dpi ≒ 0.417インチ
0.417インチ × 2.54cm ≒ 1.06cm
30ptABCx
 
2.57cm ÷ 72 × 30 ≒ 1.06cm
1cmABCx
 
1cm
8mmABCx
 
0.8cm
0.5inABCx
 
2.54cm × 0.5インチ = 1.27cm
2.5pcABCx
 
2.54cm ÷ 6 × 2.5パイカ ≒ 1.06cm

2.相対サイズのサンプル

指定font-sizewidth,height96dpiの場合の大きさ
要素の適用の
フォントサイズ
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
ページTOP

単位の変換・自動計算

以下に変換(計算)元の値を入力すると各単位の換算値が表示されます。(ピクセル密度を96dpiで計算)

px--
pt-
cm-
mm-
in-
pc-
ページTOP

留意事項

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>
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン