レスポンシブデザインをコーディングする際、要素の最大幅や最大高さを指定したい場面がよくあります。
そんな時に使用するmax-width、max-heightの使い方をご紹介します。
要素の最大幅を設定するmax-width
まずは要素の最大幅を設定するmax-widthです。
レスポンシブデザイン時に、SPでは画面いっぱい(100%表示)にしたいけどPCだと大きすぎるといった場合に使用したりできます。
以下のように最大幅を設定したい要素にmax-widthを指定する事で可能となります。
p {
width: 100%;
max-width: 200px;
}max-widthを250pxに指定。
これにより250px以上には広がりません。文字の場合は自動的に改行されます。
テキストの場合自動的に改行になりますが、画像の場合は縦横比が崩れる場合があります。
その場合は、画像に対しheight: auto;を設定する事で縦横比を保つ事が可能です。
要素の最大高さを設定するmax-height
次に最大高さを設定するmax-heightです。
指定した高さを超えると、テキストの場合は文字が突き抜けてしまいますので、必要に応じてoverflow: hidden;などで高さを超えた分を非表示にするなどの対策が必要です。
p {
max-height: 30px;
}overflow: hidden;を設定しなかった場合
max-heightを50pxに指定。
これにより50px以上には広がりませんが、文字の場合は突き抜けてしまいます。
overflow: hidden;を設定した場合
max-heightを50pxに指定。
これにより50px以上には広がりませんが。文字の場合は突き抜けてしまいます。
さいごに
いかがでしたでしょうか。
レスポンシブデザインのコーディングの際は、max-widthやmax-heightはよく使用します。使い方や各対応策など覚えておく事でスムーズにコーディングが可能になります。
最小幅・最小高さを設定するmin-widthとmin-heightについては要素の最小幅・最小高さを設定するmin-widthとmin-height【CSS】をご覧ください。
