max-width:要素の幅の最大値を指定する
初期値 | none |
適用対象 | インライン要素、テーブルの列、列グループを除く全ての要素 |
継承 | しない |
アニメーション | <length>値、<percentage>値、calc(); |
対応ブラウザ | caniuseで確認 |
max-widthプロパティの説明
max-width
は、要素の幅の最大値を指定します。width
による幅の指定がmax-width
の値を上回る場合は、これを打ち消します。逆に要素の幅がmax-width
に達していない時、その寸法を維持します。
要素の幅の最小値は、min-width
で指定します。
max-widthに指定できる値
- <length>
- CSSで使用できる長さを表すデータ型の値です。数値と単位を組み合わせた絶対値を指定できます。
- <percentage>
- 包含ボックスの幅を対象とした割合を示す値です。正の数値とパーセントで表します。
- none
- ボックスの寸法を制限しません。
- max-content
- 要素に含まれる内容が必要とする最大の幅を要求します。
- min-content
- 要素に含まれる内容が必要とする最小の幅を要求します。
- fit-content(<length-percentage>)
- 利用可能な空間に対して
fit-content
の式で計算を行い、指定された引数に置き換えます。結果は、min(max-content, max(min-content, <length-percentage>))
と同じになります。
max-widthの使い方とサンプル
max-width
プロパティの構文は以下の通りです。
CSS
/* <length>値 */
max-width: 100px;
max-width: 10rem;
/* <percentage>値 */
max-width: 50%;
max-width: 33.3%;
/* キーワード値 */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(10rem);
/* グローバル値 */
max-width: inherit;
max-width: initial;
max-width: revert;
max-width: unset;
max-widthの実例
それでは実際にmax-width
プロパティの書き方を見ていきましょう。以下の例は、width
で幅300px
の指定を行ったボックスに、max-width
で制限を加えています。max-width
の値が、指定された高さを下回る場合はこれを制御し、上回る場合は指定された通りの寸法となります。
表示確認
CSS
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > div {
width: 300px;
margin: 1rem auto 0;
padding: .3rem;
background: #fff;
}
.mw_1 {
max-width: 200px;
}
.mw_2 {
max-width: 300px;
}
.mw_3 {
max-width: 400px;
}
HTML
<div class="samp_box">
<div class="mw_1">
width: 300px;<br>
max-width: 200px;
</div>
<div class="mw_2">
width: 300px;<br>
max-width: 300px;
</div>
<div class="mw_3">
width: 300px;<br>
max-width: 400px;
</div>
</div>
max-widthに関連するCSSプロパティ
要素の幅や高さ | |
---|---|
box-sizing | 要素の幅と高さをどのように計算するかを指定する |
height | 要素の高さを指定する |
width | 要素の幅を指定する |
max-height | 要素の高さの最大値を指定する |
max-width | 要素の幅の最大値を指定する |
min-height | 要素の高さの最小値を指定する |
min-width | 要素の幅の最小値を指定する |
resize | ユーザーが要素のサイズを変更できるかどうかを指定する |