【CSS】要素の最大幅・高さを設定するmax-widthとmax-height

レスポンシブで構築する際に、要素の最大幅を設定したい場面があります。
例えば、メインビジュアルやメインコンテンツのブロックを、PCの時は100%表示にしたいけど広がりすぎるのも見難いので、1000pxまでしか広がらないようにするなど。そんな時に役立つmax-widthのご紹介です。

max-width

div {
	max-width:1000px;
	mar-gin:0 auto;
}

PCの時だけwidthで横幅を指定してもいいのですが、max-widthを指定することで、レスポンシブ時のwidthの解除や変更をすることなくコーディングしていけます。
margin:0 auto;を指定する事で、ブロック要素であれば最大幅を設定しても中央寄せできます。

max-widthと同じように、最大の高さを指定できるmax-heightというプロパティもあります。
こちらはmax-widthよりも使用頻度は低いですが、覚えておくと良いかと思います。

div {
	max-height:500px;
}

最小幅・高さを設定するmin-widthとmin-heightについては【CSS】要素の最小幅・高さを設定するmin-widthとmin-heightをご覧ください。