こんにちは。Enjoy IT Life管理人の仁科(@nishina555)です。
widthの最短・最長を指定できるmin-width・max-widthはレスポンシブな画面を作成する際によく使われるCSSプロパティです。
今回はmin-widthとmax-widthの具体的な利用シーンについて紹介をします。
目次
min-widthの使いどころ
min-widthとは要素の最短幅を定義するCSSプロパティです。
以下では具体的なmin-widthの利用シーンについて紹介します。
要素が狭くなりすぎないように最低限の幅を確保したい場合
相対値でwidthの指定をしている場合、画面が狭くなれば要素も狭くなります。
以下にデザイン崩れが起きるサンプルを用意しました。
See the Pen
minwidth-before by Toshiharu Nishina (@nishina555)
on CodePen.
このような場合はmin-widthで固定幅を指定して必要最低限の幅を確保します。
以下のサンプルではmin-widthを設定しているため、画面を狭くしても途中からテキスト幅の縮小が止まります。
See the Pen
minwidth-after by Toshiharu Nishina (@nishina555)
on CodePen.
画面が狭いときに要素が小さくなりすぎるのを防ぎたい場合
要素を相対値で表現する際に起こるケースです。
相対値で画像を表示する場合、PCだとちょうどよかった画像のサイズがスマートフォンだと小さすぎるといった問題が生じる可能性があります。
以下に画像が小さくなりすぎてしまうサンプルを用意しました。
See the Pen
minwidth-2-before by Toshiharu Nishina (@nishina555)
on CodePen.
このような場合はmin-widthで固定幅を指定して要素が小さくなりすぎるのを防ぎます。
以下のサンプルではmin-widthを設定しているため、先ほどとは違い途中で画像の縮小が止まります。
See the Pen
minwidth-2-after by Toshiharu Nishina (@nishina555)
on CodePen.
max-widthの使いどころ
max-widthとは要素の最長幅を定義するCSSプロパティです。
以下では具体的なmax-widthの利用シーンについて紹介します。
画面が広い時に要素が大きくなりすぎるのを制御したい場合
相対値でwidthの指定をしている場合、画面が広くなれば要素も広くなります。
相対値で画像を表示する場合、スマートフォンで見るとちょうどよかった画像のサイズがPCだと大きすぎるといった問題が生じる可能性があります。
以下に画像が大きくなりすぎてしまうサンプルを用意しました。
See the Pen
maxwidth-1-before by Toshiharu Nishina (@nishina555)
on CodePen.
このような場合はmax-widthで固定幅を指定して要素が大きくなりすぎるのを防ぎます。
以下のサンプルではmax-widthを設定しているため、先ほどとは違い途中で画像の拡大が止まります。
See the Pen
maxwidth-1-after by Toshiharu Nishina (@nishina555)
on CodePen.
要素が画面からはみ出さないように制御したい場合
画像などのサイズを固定値で表現する際に起こるケースです。
画面が狭くなりすぎると画像が要素からはみ出してしまい、デザイン崩れを起こす可能性があります。以下にデザイン崩れが起きるサンプルを用意しました。
See the Pen
maxwidth-2-before by Toshiharu Nishina (@nishina555)
on CodePen.
画像が要素からはみ出すということは、画像サイズが相対比で100%以上になっているということです。
このような場合はmax-wdth: 100%を画像に指定して、相対幅が最大でも100%、つまり画像が要素からはみ出ないようにします。
以下のサンプルではmax-wdth: 100%を設定しているため、画面が狭くなっても画像が要素からはみ出さないようになっています。
See the Pen
maxwidth-2-after by Toshiharu Nishina (@nishina555)
on CodePen.
元の画像サイズより大きくさせないようにする場合
imgタグはwidth: 100%を指定すると、元画像のサイズ以上であっても要素の幅に比例してサイズが大きくなります。
以下に画像が画面幅に応じてどこまでも大きくなっていくサンプルを用意しました。
See the Pen
maxwidth-3-before by Toshiharu Nishina (@nishina555)
on CodePen.
imgタグにmax-width: 100%を指定すると最大でも元画像のサイズまでしか拡大されないようになります。
以下のサンプルではmax-width: 100%を指定しているため、先ほどとは違い途中で画像の拡大が止まります。
See the Pen
maxwidth-3-after by Toshiharu Nishina (@nishina555)
on CodePen.
まとめ
以上でmin-widthとmax-widthの具体的な利用方法について紹介を終わります。
- max-widthは最低限の幅を確保したいときに利用する
- min-widthは幅が広がりすぎないように制限したいときに利用する
- スマホ画面だと画像が小さすぎる場合はmin-width
- PC画面だと画像が大きすぎる場合はmax-width
この記事がいいなと思いましたらTwitter(@nishina555)のフォローもよろしくお願いします！
