CSSのmin-widthとmax-widthの使い方を理解しよう

CSSのmin-widthとmax-widthの使い方を理解しよう

 

LINEで送る
Pocket

CSSのmin-widthとmax-widthの使い方を理解しよう

この記事の目次

  1. min-widthプロパティとは?
    1-1.min-widthの使用例
  2. max-widthプロパティとは?
    2-1.max-widthの使用例
    2-2.max-widthを画像に使用する際の注意点
  3. min-heightとmax-heightも設定できる
  4. 理解するポイント

1.min-widthプロパティとは?

min-widthは、「要素の最小幅の値」を指定するプロパティです。なぜ、最小値が必要なのかというと、可変幅(例えばwidth:50%;等)を設定している場合、画面のサイズによって要素の幅のサイズを自動で調整してくれます。その際に、要素が画面サイズによっては小さくなりすぎてしまいます。そのような時に、min-widthで最小値を設定しておけばそのサイズより小さくならずに済むというわけです。

以下の様に指定します。

div{
  min-width:100px;
}

1-1.min-widthの使用例

・ある要素に「width:10%;」を指定しているが、100px以下にはしたくない場合。

使用例:CSS

div{
  width:10%;
  min-width:100px;
  background:#CCC;
}

使用例:ブラウザ

min-widthで最小値を設定する

本来は、width:10%;だともっと幅は狭くなるはずですが、この場合は、100px以下には小さくなりません。このように、可変幅とセットで使用することが多いのが特徴です。

2.max-widthプロパティとは?

次に、max-widthプロパティです。max-widthは、min-widthと反対に「要素の最大幅の値」を指定することができます。こちらも、可変幅の場合によく使用されます。要素をこれ以上大きく表示したくない場合に使用します。

以下の様に指定します。

div{
  max-width:100px;
}

2-1.max-widthの使用例

・スマートフォン画面では、画像を画面幅より大きく表示したくない場合

使用例:CSS

img{
  width:1000px;
  max-width:100%;
  height:auto;
}

使用例:ブラウザ

max-widthで最大値を設定する

画像サイズは1000pxにも関わらず、枠からはみ出していません。これで、どんな画面サイズでもはみ出すことなく表示することができます。

2-2.max-widthを画像に使用する際の注意点

画像を可変幅にすることができましたが、「height:auto;」が実は重要な役割を果たしています。以下は、height(高さ)を指定していない場合です。

使用例:ブラウザ

高さを指定していない場合

高さを指定しないと、本来の画像の高さそのままの値となってしまい、縦横比が崩れてしまっています。そこで、「height:auto;」を指定することで、幅に合わせて「縦横比」を維持するように高さを自動調整(auto)してくれます。

画像を可変幅にしたい場合は、「height:auto」をセットで設定することを忘れないようにしましょう。

3.min-heightとmax-heightも設定できる

ここまで、min-widthとmax-widthをみてきましたが、実はmin-heightとmax-heightというプロパティも存在します。「高さの最小値と最大幅」を指定できるのですが、この2つに関しては、ほとんど使う場面はありません。使うとするならば、「froatで高さが無視されてしまう場合」や「デザインの体裁をよくする場合」などでしょう。しかし、これらも「javascript」を使用して、整えるやり方が主流であり、可変幅のサイトでは使いづらいプロパティですから、頭の片隅に置いておく程度で問題ないと思います。

理解するポイントまとめ

  • min-widthで最小値、max-widthで最大値を設定できる。
  • 画像の幅を可変にする場合は、height:autoを指定する。
LINEで送る
Pocket