「数値+単位」の形式で長さを指定します。数値は小数でも構いません。
.sample1 { width:300px; height:60px; } .sample2 { width:3.5em; height:2.7em; }
下記の単位が定義されています。相対単位では em、絶対単位では px がよく使用されます。
単位 | 定義 | 種別 | 説明 |
---|---|---|---|
em | CSS1 | 相対的 | 要素のフォントサイズ。文字 'M' の横幅が語源。 |
ex | CSS1 | 相対的 | 文字 'x' の高さ(x-height)。 |
ch | CSS3 | 相対的 | 文字 '0' の横幅。 |
rem | CSS3 | 相対的 | ルート要素のフォントサイズ(root em)。 |
vw | CSS3 | 相対的 | 表示領域の横幅(viewport's width)。 |
vh | CSS3 | 相対的 | 表示領域の高さ(viewport's height)。 |
vmin | CSS3 | 相対的 | 表示領域の横幅と高さの小さな方(viewport's mininum length) |
vmax | CSS3 | 相対的 | 表示領域の横幅と高さの大きな方(viewport's maxinum length) |
cm | CSS1 | 絶対的 | センチメートル(1cm=10mm)。 |
mm | CSS1 | 絶対的 | ミリメートル(10mm=1cm) |
q | CSS3 | 絶対的 | 1/4ミリメートル(1/4mm)。 |
in | CSS1 | 絶対的 | インチ(1in=2.54cm) |
pt | CSS1 | 絶対的 | ポイント(1pt=1/72in) |
pc | CSS1 | 絶対的 | パイカ(1pc=12pt) |
px | CSS1 | 絶対的 | ピクセル(1px=1/96in) |
相対的長さは環境によって変動する長さです。絶対的長さは環境に依存しない長さですが、絶対的長さを正しく実現するには、ディスプレイやプリンタなどの特性を考慮する必要があります。px は CSS1 では相対的長さに分類されていましたが、CSS2.1 からは絶対的長さに分類されました。
単位の省略は許されませんが、数値が 0 の場合のみ、単位を省略することができます。
.sample3 { margin: 0 1em 0 2em; }
.sample { color: black; background-image: url(../image/back.gif); width: 100px; height: 100px; border: 1px solid gray; }
<div class="sample">こんにちわ</div>