CSS - <length>

トップ > CSSリファレンス > <length>

説明

「数値+単位」の形式で長さを指定します。数値は小数でも構いません。

CSS
.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 の場合のみ、単位を省略することができます。

CSS
.sample3 { margin: 0 1em 0 2em; }

使用例

CSS
.sample {
    color: black;
    background-image: url(../image/back.gif);
    width: 100px;
    height: 100px;
    border: 1px solid gray;
}
HTML
<div class="sample">こんにちわ</div>
表示
こんにちわ

リンク


Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年5月4日
http://www.tohoho-web.com/css/value/length.htm