概要
CSSプロパティ｢max-width｣は、要素の幅の最大値を設定することができます。設定することでその幅を上回ることがなくなります。最大幅を指定しておきたい場合に有用です。一方で、最小値を指定したい場合は min-width を使用し、更に高さの最大、最小値は、min-height, max-height プロパティを使用します。
また width を同時に指定した場合は、width の値が ｢max-width｣ の値を上回ることはありません。
<p class="width">width指定のみ</p>
<p class="max-width">max-width指定</p>
<style>
p {
background-color: #fdd;
width: 300px;
}
.max-width {
max-width: 150px;
}
</style>ピンク色の要素はCSSプロパティ width で300pxの値を指定しています。
そして下段の方は更に ｢max-width｣ の指定で最大幅を150pxにしました。そうすると ｢max-width｣ を指定していない方は、幅の値が上書かれたので、最大幅が150pxの表示になりました。
値の指定方法
{ max-width: キーワード, 値, パーセント }実数値 + 以下のような単位で指定します。マイナス値は指定できませんので、注意しましょう。
値の単位の詳細は以下の通りです。
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
使用例
クリックすると動きのでる横棒グラフを作成します。このアニメーションはCSSプロパティ [/cssp] transition[/css] を使います。そして、ボタンのクリック後の値に、任意の幅を指定することで実現することができます。
クリックすると、ゲージが幅いっぱいに伸びましたが、ギリギリまで伸び過ぎた印象です。これの余白を少しだけ持たせたい時なのにこのプロパティを使って最大幅を指定してあげます。
この例では下段のゲージに95%を指定してますので、全体幅の95%のところまでしか広がらないのがわかります。
<div class="width"></div>
<button>クリックするとバーがのびます</button>
<ul>
<li class="width-100"></li>
<li class="width-100 max-width"></li>
</ul>
<style>
* {
padding: 0;
margin: 0;
}
button {
padding: 10px;
margin-bottom: 10px;
}
li {
background-color: #ffc0cb;
list-style: none;
margin-bottom: 5px;
height: 40px;
width: 0%;
min-width: 10px; /* 最低サイズを指定します */
}
button:active + ul li,
button:focus + ul li {
transition: 1s;
}
/* クリックされたときのwidthの値を指定 */
button:active + ul .width-100,
button:focus + ul .width-100 {
width: 100%;
}
.max-width {
max-width: 95%;
}
</style>