max-width

概要

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

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

構文

/* <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 は、内容物が必要とする最適な幅に基づいて要素の幅を設定するために使用できます:

<div id="parent">

    <div id="child">

        Child Text

    </div>

</div>

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

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

仕様

ブラウザ実装状況

[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 とは異なります。

参照

• width、 min-width、 max-height
• ボックスモデル、box-sizing