max-width と min-width は、CSS2.1 から使えるようになった要素の最大/最小幅を指定するプロパティです。
CSS3 の実装が進んだ現在は、PCとスマートフォンのほぼ全てのブラウザで利用可能です。
この記事では、レスポンシブデザインに欠かせない、width を含めた3つのプロパティの関係と、可変幅の指定方法について解説します。
max-width と min-width
要素(画像やブロック)に対して max-width で表示する最大幅を、min-width で最小幅を指定できます。
これらのプロパティを応用することで、ブラウザの幅に連動した要素幅の可変が実現できます。
なおページ全体の幅が固定であれば、通常通り width のみで幅を決定したほうが描画速度的に有利です。
幅指定の優先度
要素の幅を指定するCSSプロパティは、下記のように min-width が最も優先されます。
min-width > max-width > widthこれらを指定すると、実際に表示される幅(width)は min-width と max-width の間の値に制限されます。
また、3つのうちで min-width に最も大きな幅を指定すると、max-width や width にどんな値を指定しても min-width の幅で固定になります。
width の 100% と auto
width の100%は、親ブロックの幅に対しての100%です。
その為、画像に100%を指定すると、画像本来の幅は無視されます。
画像に width: auto を指定すると、ブラウザにより画像本来の幅が設定されます。
画像幅を可変にする
レスポンシブデザインでは、画像の幅をブラウザ幅の変動に合わせて可変にしたい場合があります。
CSS2.1 以降はそれを可能にする方法がいくつか有りますが、ブラウザ毎の実装状況の差も有り、現時点での選択肢は限られています。
概ね下記の何れかのような指定になるでしょう。
.A {
width: 100%;
max-width: 500px;
min-width: 300px;
height: auto;
}
.B {
width: 500px;
max-width: 100%;
min-width: 300px;
height: auto;
}
.C {
width: auto;
max-width: 100%;
min-width: 300px;
height: auto;
}A は width: 100% で画像の幅が親要素の幅に連動するようになります。
最大幅は max-width、最小幅は min-width によって制限されますので、それぞれの値に達するとそれ以上変動せず、親要素の幅は無視されます。
論理的には最も明確と言えます。
B では、max-width は100%ですが、最大でも width の幅を超えることは無く、width より狭い時は min-width の幅になるまで連動します。結果的に、Aと同様の動作になります。
C も B と近い動作で、width: auto により画像本来の幅が最大幅になる点だけが違います。
CSS側で最大幅を制限できない為、レスポンシブデザインとの相性はあまり良くありません。
B と C の場合、MDNの解説に拠れば max-width が width よりも優先するはずで、最大幅は親ブロックの内側の幅になりそうですが、親ブロックが充分に大きい場合でも実際にはそうなりません (Chrome, Firefox, Edgeの何れも)。
以上から、max-width が100%の場合、最大幅は width の幅になると考えて良さそうです。
min-width は何れも任意の最小幅を指定します。ここでは300pxとしています。
height は auto と指定してブラウザによる自動計算に任せます。これで、幅が変わった時でも画像本来の縦横比を維持したまま最適な高さになります。
確認環境
2017年3月時点の Firefox 及び Chrome 最新版(Windows)で動作確認しました。
また、Chrome によるスマートフォンのエミュレーションでもテストしました。
参考
- max-width - CSS | MDN
- min-width - CSS | MDN
- <length> - CSS | MDN 値の相対単位と絶対単位について
コメントを投稿