min-widthプロパティは、領域の幅の最小値を指定する際に使用するプロパティです。他にも、幅と高さの最小値、最大値を指定するための、min-heightプロパティ、max-widthプロパティ、max-heightプロパティがあります。
最小値や最大値を指定することで、要素の幅を一定範囲内に収めることができます。
今回は、これらのプロパティについてまとめたいと思います。
widthプロパティとheightプロパティについては、以下のページもご参照下さい。
CSS【 幅と高さ 】1～widthプロパティ、heightプロパティ
CSS【 幅と高さ 】2～min-width、min-height、max-width、max-height（本ページ）
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
目次
| min-width | img要素やimput要素などの領域の幅の最小値を指定 この指定をすると、要素の幅を一定範囲内に収めることができる |
|---|---|
| min-height | img要素やimput要素などの領域の高さの最小値を指定 この指定をすると、要素の高さを一定範囲内に収めることができる |
| max-width | img要素やimput要素などの領域の幅の最大値を指定 この指定をすると、要素の幅を一定範囲内に収めることができまる |
| max-height | img要素やimput要素などの領域の幅の最大値を指定 この指定をすると、要素の高さを一定範囲内に収めることができる |
この4つのプロパティも、widthプロパティとheightプロパティと同様に、インラインの要素には使用できません。
但し、インラインの要素でも置換要素に対しては使用できます。
置換要素とは、中身が他のものに置き換えられる要素で、テキストではなく画像など他のファイルが入るため、幅や高さが生じる要素のことです。img要素などが置換要素です。
そして、widthプロパティとheightプロパティと同様に、コンテンツの領域の幅と高さを指定するのがデフォルトです。
ボーダやパディングを幅や高さに含めたい場合は、box-sizingプロパティを使って範囲を変更する必要があります。
min-widthプロパティとmin-heightプロパティは、幅や高さの最小値を指定します。
これより小さくはしたくないという下限の値を指定します。
min-widthプロパティとmin-heightプロパティの値は、どちらも次の通りです。
| inherit | 親要素のmin-widthプロパティまたはmin-heightプロパティの値を継承 |
|---|---|
| 数値 | pxやemなどの単位を付けて指定 デフォルト値は0 |
| % | 親要素の幅や高さに対するパーセントで指定 |
min-widthプロパティとmin-heightプロパティの値は、継承されません。
また、両プロパティは、全ての要素で使用できます。
親要素に min-widthプロパティまたはmin-heightプロパティの指定がある場合、inheritを指定すると、親要素の値を継承して、それより小さくはなりません。
デフォルト値が0のため、最小サイズの指定をしない場合は、どこまでも小さくなる可能性があるということになります。
max-widthプロパティと max-heightプロパティは、幅や高さの最大値を指定します。
これより大きくしたくないという上限の値を指定します。
max-widthプロパティと max-heightプロパティの値は、どちらも次の通りです。
| none | デフォルト値 上限なし |
|---|---|
| 数値 | pxやemなどの単位を付けて指定 |
| % | 親要素の幅や高さに対するパーセントで指定 |
max-widthプロパティとmax-heightプロパティの値は、継承されません。
また、両プロパティは、全ての要素で使用できます。
デフォルト値がnoneのため、最大サイズの指定をしない場合は、上限なく大きくなれるということになります。
max-widthプロパティを指定すると、幅の上限ができますが、相対値で上限を指定する際に関わってくるのがwidthプロパティの値です。
img要素のような置換要素で固有サイズを持つ要素では、widthプロパティの指定がない場合（width: auto）、max-widthプロパティに相対値（％やemなど）を指定しても、幅は原寸より大きくなりません。
width:autoで固有サイズの原寸になっているため、原寸が上限になります。
%の対象が自分自身になったのではなく、上限が固有サイズとなります。
max-widthプロパティの計算値が画像より小さくなる場合は、親要素に対する相対的なサイズで表示されます。
img要素に、width :100%を指定してからmax-width :100%を指定すると、自分自身の原寸サイズではなく親要素の幅に追随します。上限が親要素の幅いっぱいだからです。
widthプロパティの値がauto（デフォルト値）の場合、置換要素は固有サイズが上限になると覚えましょう。
max-width等4つのプロパティは、ユーザが自由にサイズを変えられる要素（textarea要素など）で、サイズをこれ以上大きく（または小さく）させたくない場合に使用すると便利です。
設問がたくさんあるようなフォームの場合は、入力欄が際限なく大きく（または小さく）なるよりも、ある程度サイズを制限しておいたほうが、ユーザも使いやすいからです。
また、親要素の幅に追随するレイアウトで、これ以上大きく（または小さく）なると読みにくかったり、見た目が変だったりする場合も、便利に使用できます。
INTERNOUS,inc. All rights reserved.
