要素の幅の制限を指定します。
「max-width」は、要素の幅の最大値を指定します。
「min-width」は、要素の幅の最小値を指定します。
CSS Ver. | 適用要素 | 継承 |
---|---|---|
2.1 | 全て ※1 | しない |
構文 | |
---|---|
max-width : length | none; min-width : length; |
|
プロパティ/設定値 | 意味 |
max-width: none; max-width: 100px; max-width: 80%; |
幅の最大値の制限なし(初期値) 幅の最大値を値で指定。負の値は指定不可。 「長さ・大きさの単位」参照 デフォルト:「タグ毎のスタイル初期値」を参照 |
min-width: 100px; min-width: 80%; |
幅の最小値を値で指定。負の値は指定不可。 「長さ・大きさの単位」参照 デフォルト:「タグ毎のスタイル初期値」を参照 |
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
width : 290px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
.css_max-width_none{
max-width : none;
white-space: nowrap;
display: inline-block;
}
.css_max-width_250{
max-width : 250px;
white-space: nowrap;
display: inline-block;
}
.css_max-width_500{
max-width : 500px;
white-space: nowrap;
display: inline-block;
}
.css_min-width_290{
min-width : 290px;
white-space: nowrap;
display: inline-block;
}
.css_min-width_500{
min-width : 500px;
white-space: nowrap;
display: inline-block;
}
<!-- html -->
<div class="common">
<div class="cssTitle">max-width : none;</div>
<div class="css_max-width_none">
幅制限なし。要素にあわせた幅で表示。幅制限なし。要素にあわせた幅で表示。
</div>
<div class="cssTitle">max-width : 250px;</div>
<div class="css_max-width_250">
幅の最大値を超える部分ははみ出して表示。幅の最大値を超える部分ははみ出して表示。
</div>
<div class="cssTitle">max-width : 500px;</div>
<div class="css_max-width_500">
幅の最大値内で、要素にあわせた幅で表示。
</div>
<div class="cssTitle">min-width : 290px;</div>
<div class="css_min-width_290">
最小値の幅を超える部分は、要素にあわせた幅で表示。
</div>
<div class="cssTitle">min-width : 500px;</div>
<div class="css_min-width_500">
最小値の幅で、要素と余白を表示。
</div>
</div>
関連するCSS(STYLE) | |
---|---|
border-bottom-width | 罫線の底辺の太さ設定 |
border-image-width | 画像ボーダーの太さ |
border-left-width | 罫線の左辺の太さ設定 |
border-right-width | 罫線の右辺の太さ設定 |
border-top-width | 罫線の上辺の太さ設定 |
border-width | 罫線の太さ設定 |
column-rule-width | マルチカラムの区切り線の太さ |
column-width | マルチカラムのカラムの横幅 |
min-width | 横幅の最小値 |
outline-width | アウトラインの太さ |
width | 横幅 |