CSS3 Pre-Reference



長さ

長さ

試す

サンプル

幅いっぱいの表示になっているものは、おそらく未対応です。

width:10em;

width:15ex;

width:10gd;

width:10rem;

width:0.1vw;

width:0.1vh;

width:0.1vm;

width:10ch;

width:1in;

width:2cm;

width:20mm;

width:100pt;

width:10pc;

コメントする


対応ブラウザ

Firefox
Chrome/Safari
Opera
InternetExplorer

パラメータ

レベル 1
参考文献 CSS3 Values and Units#3.4.1. Lengths

解説

長さを示します。

書き方は、”数値+単位”です。数値がゼロの場合は、単位を省略できます。あっても無くても一緒ですから。

”単位”は大きく”絶対長単位”(Absolute length units)と”相対長単位”(Relative length units)に分類されます。

CSS3では新たに、gd、rem、vh、vw、vm、chという5つの単位が追加されています。以下に単位を列挙します。

相対長単位

em
算出されたフォントサイズ(font-size)を参照します。フォントサイズにemを指定した場合は、親フォントのフォントサイズを参照します。
ex
要素の文字”x”の高さを参照します。”x”を含まない場合は、0.5emを1exとします。ただし、執筆時の段階ではまだ検討中です。
px
閲覧しているデバイスの解像度を参照します。(pixel)
gd
'layout-grid'プロパティで定義されているグリッド幅の値を参照します。(grid)グリッド幅が指定されていない場合は、”em”と同じ解釈になります。
rem
ルート要素のフォントサイズを参照します。(root's em)もしルート要素に指定した場合は、そのブラウザの”font-size:medium”のデフォルトフォントサイズを参照します。
vw
ビューポートの幅を参照します。(viewport's width)つまり、ブラウザのウィンドウサイズを変更すると、この値が変わります。
vh
ビューポートの高さを参照します。(viewport's height)つまり、ブラウザのウィンドウサイズを変更すると、この値が変わります。
vm
ビューポートの幅、高さのうち短いほうを参照します。つまり、ブラウザのウィンドウサイズを変更すると、この値が変わります。
ch
”0” (ZERO, U+0030)グリフの幅を参照します。新ゴなどでは大きくなります。ゼロを含まないフォントの場合は平均的なフォント幅を参照することになっていますが、執筆段階では検討中です。

絶対単位

in
インチ -- 1inは25.4mmに相当
cm
センチメートル -- 1cmは10.0mmに相当
mm
ミリメートル
pt
ポイント -- 1ptは約0.353mmに相当
pc
パイカ -- 1pcは約4.23mmに相当

トラックバック

投稿されたコメント