こんにちは朱夏です。
今回は、CSSのmax-width、min-widthを使って、画面サイズに合わせて要素を変形させる方法を解説してみたいと思います。
スマホ用とPC用以外にもいろんなサイズがあるんだよな。
サイズが自動的に変化してくれたらいいのに。
画面のサイズ等に併せて、自動的に要素のサイズを変える方法を紹介していきます。
それではいってみましょう。
最大値を決めるmax-width
最小値をきめるmin-width
あとがき
最大値を決めるmax-width
「max-width」は要素の横幅の最大値を指定するプロパティです。
書き方は以下の様になります。
この様に指定すると、横幅500pxの要素として表示されますが、画面やブラウザの横幅が500px以下になった時には、それに合わせて横幅が短くなっていきます。
このプロパティの特徴として、絶対単位であるpxで指定しても、画面のサイズによって自動的にサイズが調節されます。
最小値をきめるmin-width
「min-width」は、要素の横幅の最小値を決めるプロパティです。
書き方はこちらです。
divなどのブロック要素に横幅の最小値を決めると、500px以上の横幅を持つ画面サイズだった場合は、横幅いっぱいに広がります。
横幅が500px以下の画面サイズになった時には、要素のサイズは横幅500pxに固定されます。
画面の横幅が500px以下になった時は、画面外にはみ出して横スクロールする様になります。
あとがき
というわけで、今回は「max-width」と「min-width」を紹介してみました。
今回のまとめはこちら。
- 絶対単位でも自動調整される
- max-widthは横幅の最大値を決める
- min-widthは横幅の最小値を決める
因みに、画像にこのプロパティを指定すると、縦横比を保ったままサイズ調整されるようになります。
横幅の代わりに縦幅を指定する「max-height」、「min-height」もあります。
使い所を見極めて、デザインに活かしていきたいと思います。
今回は以上です。
次回もよろしくお願いします。
