CSS - <length> - とほほのWWW入門

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

CSS

.sample1 { width: 300px; height: 60px; }
.sample2 { width: 3.5rem; height: 2.7rem; }

下記の単位が定義されています。相対単位では rem、絶対単位では 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)

CSS

.sample {
    color: black;
    background-image: url(../image/back.gif);
    width: 100px;
    height: 100px;
    border: 1px solid gray;
}

HTML

<div class="sample">こんにちわ</div>

表示

こんにちわ

単位の省略は許されませんが、数値が 0 の場合のみ、単位を省略することができます。

CSS

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

相対的長さは環境によって変動する長さです。絶対的長さは環境に依存しない長さですが、絶対的長さを正しく実現するには、ディスプレイやプリンタなどの特性を考慮する必要があります。px は CSS1 では相対的長さに分類されていましたが、CSS2.1 からは絶対的長さに分類されました。

em は親要素の文字の大きさによって変動しますが、rem はルート要素の文字の大きさのみに依存します。親要素によって長さが変動してしまう em よりも、変動しない rem の方がよく用いられています。

スマホでアドレスバーなどの表示・非表示によってビューポートの高さが変わる場合に対応するために、下記の新しい単位が追加されています。s～や d～を用いることにより、アドレスバーなどがコンテンツを隠してしまうことを防ぐことができます。

単位	定義	種別	説明
svw	CSS4	相対的	表示領域の横幅(最小ビューポート基準)。
svh	CSS4	相対的	表示領域の高さ(最小ビューポート基準)。
svmin	CSS4	相対的	表示領域の横幅と高さの小さな方(最小ビューポート基準)
svmax	CSS4	相対的	表示領域の横幅と高さの大きな方(最小ビューポート基準)
lvw	CSS4	相対的	表示領域の横幅(最大ビューポート基準)。
lvh	CSS4	相対的	表示領域の高さ(最大ビューポート基準)。
lvmin	CSS4	相対的	表示領域の横幅と高さの小さな方(最大ビューポート基準)
lvmax	CSS4	相対的	表示領域の横幅と高さの大きな方(最大ビューポート基準)
dvw	CSS4	相対的	表示領域の横幅(ダイナミックビューポート基準)。
dvh	CSS4	相対的	表示領域の高さ(ダイナミックビューポート基準)。
dvmin	CSS4	相対的	表示領域の横幅と高さの小さな方(ダイナミックビューポート基準)
dvmax	CSS4	相対的	表示領域の横幅と高さの大きな方(ダイナミックビューポート基準)

サポート状況は下記を参照してください。

初版：1997年7月27日、最終更新：2024年1月21日

http://www.tohoho-web.com/css/value/length.htm

CSS - <length>