概要
max-width
は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。このプロパティは、 width
プロパティの値が max-width
で指定された値より大きくなることを防ぎます。
max-width
は width
を上書きしますが、min-width
は max-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
とは異なります。