mozilla
Your Search Results

    width

    概要

    CSS の width プロパティは、コンテンツエリア領域の横幅を指定する為のプロパティです。コンテンツエリア とは、要素のパディング、マージン、ボーダーの領域より 内側 の、子要素が描画される領域を指します。

    • 初期値 auto
    • 適用対象 all elements but non-replaced inline elements, table rows, and row groups
    • 継承 継承しない
    • 相対値の基準 refer to the width of the containing block
    • メディア visual
    • 計算値 the percentage or auto as specified or the absolute length
    • アニメーションの可否 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
    • 正規順序 the length or percentage before the keyword, if both are present

    構文

    width:  [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto

    <length>
    指定可能な単位については <length> を参照して下さい。
    <percentage>
    親となるブロック要素に対する <割合> を指定
    border-box
    <length> または <割合> を要素のボーダーボックスに適用
    content-box
    <length> または <割合> を要素のコンテンツボックスに適用
    auto
    ブラウザにコンテンツ幅の計算を委ねる事を意味する指定
    max-content
    コンテンツが取り得る最大幅
    注記: WebKit はintrinsic の名前でこの値の前バージョンを実装しており、 2012 年 6 月より、 fit-contents も実装されています。
    min-content
    コンテンツが取り得る最小幅
    available
    包含ブロックの幅から、それぞれ水平方向のマージン、ボーダー、パディングを取り除いたサイズ。
    fit-content
    内容物にフィットした幅。以下の様に算出される。
    1. max-content 指定時の値と、表示に利用可能な幅とを比較の内、値の小さいものをキープ。
    2. 前ステップの結果と min-content 指定時の値を比較して、値の大きい方を採用。

    table { width: 100%; }
    
    img   { width: 200px; }
    
    form  { width: auto; }
    
    p     { width: 40em; }

    実際の表示を確認


    p { background: gold }

    The Mozilla community produces a lot of great software.


    p {
      background: lightgreen;
      width: intrinsic;         /* Safari/WebKit uses a non-standard name */
      width: -moz-max-content;  /* Firefox/Gecko */
    }

    The Mozilla community produces a lot of great software.


    p { background: lightblue;  max-width: -moz-min-content; }

    The Mozilla community produces a lot of great software.


    仕様

    仕様書 策定状況 コメント
    CSS Basic Box Model 草案 Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
    CSS Transitions 草案 Lists width as animatable.
    CSS Level 2 (Revision 1) 勧告 Precises on which element it applies to.
    CSS Level 1 勧告 Initial specification.

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本サポート (有) 1.0 (1.7 or earlier) 4 3.5 1.0 (85)
    Animatability ? 16.0 (16.0) ? ? ?
    max-content 22 -webkit 3.0 (1.9)-moz ? ? 2.0 (421) (intrinsic 値)
    min-content 22 -webkit 3.0 (1.9) -moz ? ? ?
    available 22 -webkit 3.0 (1.9) -moz ? ? ?
    fit-content 22 -webkit 3.0 (1.9) -moz ? ? ?
    border-box and content-box 未サポート 未サポート 未サポート 未サポート 未サポート
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート ? ? ? ? ?

    関連情報

    ドキュメントのタグと貢献者

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