Your Search Results

    length

    概要

    CSS プロパティ の中には <length> を値として持つものが多くあります。例えば、 width, margin, padding, font-size, border-width, text-shadow 等です。

    <length> に対する CSS の構文規則は、数値の直後にその単位を記述するというものです。数値と単位の間の空白文字は許容されません。

    負の length は、プロパティによって許可されるものと、構文エラーになるものがあります。一部の CSS プロパティは、 <length> 値と <割合> 値の両方を受け入れることに注意してください。<割合> 値も CSS の寸法を表すデータ型ではありますが、<length> 値ではありません。

    補間

    CSS の <length> データ型の値は、アニメーション用に補間可能です。値は実数(浮動小数点数、<number>)として補間されます。補間は値を計算したときに発生します。補間の速度は、アニメーションに結びつけられた timing function によって決められます。

    単位

    相対単位

    フォントに関連した length

    em
    当該要素の font-size の計算値を表します。font-size プロパティ自身に使われると、要素の継承されたフォントサイズの値を表します。
    この単位は、ユーザーがフォントサイズを変えたときにも vertical rhythm of the page を維持するような、拡縮可能なレイアウトでよく使われます。CSS プロパティ line-heightfont-sizemargin-bottommargin-top はよく、em で表現されます。
    ex
    当該要素で用いられる font の x-height です。一般的に、フォントにおける小文字の高さに相当します。多くのフォントで 1ex ≈ 0.5em です。
    ch
    現在のフォントの "0" (ゼロ) の幅です。
    rem
    ルート要素の font-size (例えば、html 要素の font-size) です。ルート要素で使うと初期値を表します。
    この単位は完全に拡縮可能なレイアウトを作るのに役立ちます。対象ブラウザのサポートがない場合には em 単位を使って同様のレイアウトを実現可能ですが、やや複雑になります。

    ビューポート-パーセンテージ length

    vh
    ビューポートの高さの 1/100
    vw
    ビューポートの幅の 1/100
    vmin
    ビューポートの高さまたは幅の、最小値の 1/100
    vmax
    ビューポートの高さまたは幅の、最大値の 1/100
     

    絶対単位

    絶対単位は出力メディアの物理的な特性がわかっている場合 (例えば、プリンター) に便利です。スクリーンディスプレイにおいては、 1 インチ当りのピクセル数は、システムがディスプレイの解像度から概算 (たいてい不正確ですが) して決定します。

    低 dpi のデバイスでは、単位 px は physical reference pixel を表し、その他の単位はこれを基準に決められます。例えば 1in96px と定義され、これは 72pt と等しくなります。こうした定義の結果、低 dpi のデバイスでは inches (in)、centimeters (cm)、millimeters (mm) といった単位で表現される length が、同名の物理的な単位と同じ長さになる必要はありません。

    高 dpi のデバイスでは、インチ (in)、センチメートル (cm)、ミリメートル (mm) は実際の長さの「コピー」として定義されます。単位 px は、この定義に相対的に決められます(1 インチの 1/96です)。

    ユーザーはアクセスしやすいように、フォントサイズを大きくするかもしれません。フォントサイズに関わらず使えるレイアウトにするには、出力媒体(例えばビットマップ画像)の物理的特性がわかる場合には、絶対的な単位だけを使ってください。フォントサイズに相対的に length を設定するときは、emrem のような相対的な単位を選んでください。
    px
    表示しているデバイスによります。
    スクリーンディスプレイでは、通常はディスプレイの 1 デバイスピクセル(ドット)です。
    プリンタや非常に高解像度のスクリーンでは、CSS の 1 ピクセルは複数のデバイスピクセルを含むため、ピクセル / インチは約 96 です。
    mm
    1 ミリメートル
    cm
    1 センチメートル (10 ミリメートル)
    in
    1 インチ (2.54 センチメートル)
    pt
    1 ポイント (1 インチの 1/72)
    pc
    1 パイカ (12 ポイント)
    mozmm
    実験的実装の単位で、ディスプレイ解像度によらず、正確に 1 ミリメートルを描画しようとします。この単位が実際に使えるケースは稀ですが、特にモバイルデバイスで便利かもしれません。

    CSS の単位と dots-per-inch

    単位 in はスクリーン上の物理的なインチではなく、96px を表します。実際のスクリーンのピクセル密度が何であろうと、96dpi であると仮定されるということです。より細かなピクセル密度を持つデバイスでは、1in は物理的な 1 インチよりも短くなるでしょう。同様に mmcmpt は絶対的な length ではありません。

    具体例です:

    • 1in は常に 96px
    • 3pt は常に 4px
    • 25.4mm は常に 96px

    仕様

    仕様書 策定状況 コメント
    CSS Values and Units Module Level 3 勧告候補 追加:ch, rem, vw, vh, vmin, vmax
    CSS Level 2 (Revision 1) 勧告 pt, pc, px を明示的に定義(CSS1 で暗黙的に定義されていたものです)
    CSS Level 1 勧告  

    ブラウザ実装状況

    機能 Chrome (WebKit) Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0
    ch 未サポート 1.0 (1.7 or earlier) [1] 9.0 未サポート 未サポート
    rem 4 (532.3) 3.6 (1.9.2) 9.0 11.6 4.1
    vh, vw 20.0 19 (19) 9.0 未サポート 6.0
    vmin

    20.0 (with the non-standard name vm)
    (bug 91440)

    19 (19) 9.0 (with the non-standard name vm) 未サポート 6.0
    vmax 26 19 (19) 未サポート 未サポート 未サポート (bug 91440)
    mozmm 未サポート 4.0 (2.0) 未サポート 未サポート 6.0
    1in が常に 96dpi (有) 4.0 (2.0) (有) (有) (有)
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート (有) (有) (有) (有) (有)
    ch 未サポート (有) ? ? ?
    rem 2.1 (有) ? 12.0 4
    vh, vw, vmin (有) 19.0 (19) ? 未サポート 6.0
    vmax 未サポート (bug 91440) 19.0 (19) ? 未サポート 未サポート (bug 91440)

    [1] Gecko 1.0-1.9.0 (Firefox 1.0-3.0) では、ch は 'M' の幅で、CSS の border-widthoutline-width プロパティでは機能しませんでした。

    関連情報

    Document Tags and Contributors

    Contributors to this page: Taken, ethertank, haccy, Marsf, sosleepy
    最終更新者: ethertank,
    サイドバーを隠す