概要

max-width は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。このプロパティは、 width プロパティの値が max-width で指定された値より大きくなることを防ぎます。

max-widthwidth を上書きしますが、min-widthmax-width を上書きします。

初期値none
適用対象all elements but non-replaced inline elements, table rows, and row groups
継承不可
相対値の基準包含ブロックの幅
メディアvisual
計算値指定されたパーセンテージ値または絶対的な長さ、または none
アニメーションの可否可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますlength または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* <length> 値 */
max-width: 3.5em;

/* <percentage> 値 */
max-width: 75%;

/* キーワード値 */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* グローバル値 */
max-width: inherit;
max-width: initial;
max-width: unset;

none
要素幅に上限値を設定しない事を示す指定
<length>
指定可能な単位については <length> を参照して下さい。
<percentage>
包含ブロックの幅に対する <percentage> を指定します。
max-content
コンテンツにあわせた最適な幅
min-content
コンテンツにあわせた最小の幅
fill-available
包含ブロックの幅から、それぞれ水平方向のマージン、ボーダー、パディングを取り除いたサイズです。一部のブラウザは、このキーワードの旧称である available を実装しています。
fit-content
max-content と同じもの

形式構文

<length> | <percentage> | none | max-content | min-content | fit-content | fill-available

この例では "子" の <div> に、親の <div> の幅全体を使用するように width プロパティを指定していますが、max-width プロパティで最大幅を 150px に制限しています。

<div id="parent">
    <div id="child">
        The Mozilla community produces a lot of great software.
    </div>
</div>
#parent { width: 300px; }

#child  { background: gold;
          width: 100%;
          max-width: 150px;
        }

値 fit-content は、内容物が必要とする最適な幅に基づいて要素の幅を設定するために使用できます:

#parent { background: lightblue;
          width: 300px; }

#child  { background: gold;
          width: 100%;
          max-width: -moz-fit-content;
          max-width: -webkit-fit-content;
        }

仕様

仕様書 策定状況 コメント
CSS Intrinsic & Extrinsic Sizing Module Level 3
max-width の定義
草案 キーワード max-content, min-content, fit-content, fill-available を追加。
CSS3 Box および CSS3 Writing Modes の草案の両方で、これらのキーワードを定義していました。本仕様書は、これらの草案を置き換えました。
CSS Transitions
max-width の定義
草案 max-width がアニメーション可能として定義された
CSS Level 2 (Revision 1)
max-width の定義
勧告 最初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 1.0 (1.7 or earlier) 7.0 4.0 2.0.2 (416),
これより前はバグあり
<table> への適用 [1] 未サポート (有) 未サポート (有) 未サポート
max-content, min-content, fit-content, fill-available 未サポート [3] 3.0 (1.9)-moz [2] 未サポート 未サポート 未サポート [3]
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

[1] CSS 2.1 では <table> における max-width の動作を、明示的に未定義としていました。よってどのような動作も CSS2.1 に準拠します。新たな CSS 仕様書で動作を定義する可能性がありますので、Web 開発者は現在の特定の動作に依存すべきではありません。

[2] Gecko は CSS3 Basic Box で定義された内容を実験的に実装しています。これは fill-available ではなく available を定義しています。また fit-content の定義は、CSS3 のサイズ決定法よりもシンプルです。

[3] WebKit は最適な高さの設定について、過去の提案を実装しています。キーワード max-content の代わりに intrinsic、また min-content の代わりに min-intrinsic を実装しています。これらは fill-available および fit-content とは異なります。

参照

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

 このページの貢献者: Simplexible, Sebastianz, Prinz_Rana, yyss, shuuji3, teoli, ethertank
 最終更新者: Simplexible,