レスポンシブデザインをコーディングする際、要素の最小幅や最小高さを指定したい場面がたまにあります。
そんな時に使用するmin-width、min-heightの使い方をご紹介します。
要素の最小幅を設定するmin-width
まずは要素の最小幅を設定するmin-widthです。
レスポンシブ時など、小さくなり過ぎないように設定する事がたまにあります。
以下のように最小幅を設定したい要素にmin-widthを指定する事で可能となります。
p {
width: 100%;
min-width: 400px;
}上記の場合、基本的には横幅いっぱいに広がりますが、レスポンシブ時など画面サイズが小さくなった時に400px以下にならないようになっています。
要素の最小高さを設定するmin-height
次に最小高さを設定するmin-heightです。
指定した高さをより小さくならないようになります。
p {
max-height: 100px;
background-color: #F4F4F4;
}min-heightを100pxに指定。
文字数が増えた場合は100px以上になりますが、文字数が減っても100px未満にはなりません。
さいごに
いかがでしたでしょうか。
レスポンシブデザインのコーディングの際、min-widthやmin-heightはたまに使用します。使い方や各対応策など覚えておく事でスムーズにコーディングが可能になります。
最大幅・最大高さを設定するmax-widthとmax-heightについては要素の最大幅・最大高さを設定するmax-widthとmaxn-height【CSS】をご覧ください。
