CSS【 幅と高さ 】2 ~ min-width、min-height、max-width、max-height

colmun_main4861

min-widthプロパティは、領域の幅の最小値を指定する際に使用するプロパティです。他にも、幅と高さの最小値、最大値を指定するための、min-heightプロパティ、max-widthプロパティ、max-heightプロパティがあります。
最小値や最大値を指定することで、要素の幅を一定範囲内に収めることができます。
今回は、これらのプロパティについてまとめたいと思います。

widthプロパティとheightプロパティについては、以下のページもご参照下さい。
CSS【 幅と高さ 】1 ~ widthプロパティ、heightプロパティ

目次

1.min-width、min-height、max-width、max-height
2.min-widthプロパティとmin-heightプロパティの値
3.max-widthプロパティとmax-heightプロパティの値
4.img要素の最大幅
5.最大値や最小値の使用場面

1.min-width、min-height、max-width、max-height

min-widthプロパティは、img要素やimput要素などの領域の幅の最小値を指定するプロパティです。この指定すると、要素の幅を一定範囲内に収めることができます。

min-heightプロパティは、img要素やimput要素などの領域の高さの最小値を指定するプロパティです。この指定すると、要素の高さを一定範囲内に収めることができます。

max-widthプロパティは、img要素やimput要素などの領域の幅の最大値を指定するプロパティです。この指定すると、要素の幅を一定範囲内に収めることができます。

max-heightプロパティは、img要素やimput要素などの領域の幅の最大値を指定するプロパティです。この指定すると、要素の高さを一定範囲内に収めることができます。

この4つのプロパティも、widthプロパティとheightプロパティと同様に、インラインの要素には使用できません。
但し、インラインの要素でも置換要素に対しては使用できます。
置換要素とは、中身が他のものに置き換えられる要素で、テキストではなく画像など他のファイルが入るため、幅や高さが生じる要素のことです。img要素などが置換要素です。

そして、widthプロパティとheightプロパティと同様に、コンテンツの領域の幅と高さを指定するのがデフォルトです。
ボーダやパディングを幅や高さに含めたい場合は、box-sizingプロパティを使って範囲を変更する必要があります。

▲目次へ戻る

2.min-widthプロパティとmin-heightプロパティの値

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のため、最小サイズの指定をしない場合は、どこまでも小さくなる可能性があるということになります。

▲目次へ戻る

3.max-widthプロパティとmax-heightプロパティの値

max-widthプロパティと max-heightプロパティは、幅や高さの最大値を指定します。
これより大きくしたくないという上限の値を指定します。

max-widthプロパティと max-heightプロパティの値は、どちらも次の通りです。

none デフォルト値
上限なし
数値 pxやemなどの単位を付けて指定
% 親要素の幅や高さに対するパーセントで指定

max-widthプロパティとmax-heightプロパティの値は、継承されません。
また、両プロパティは、全ての要素で使用できます。

デフォルト値がnoneのため、最大サイズの指定をしない場合は、上限なく大きくなれるということになります。

▲目次へ戻る

4.img要素の最大幅

max-widthプロパティを指定すると、幅の上限ができますが、相対値で上限を指定する際に関わってくるのがwidthプロパティの値です。

img要素のような置換要素で固有サイズを持つ要素では、widthプロパティの指定がない場合(width: auto)、max-widthプロパティに相対値(%やemなど)を指定しても、幅は原寸より大きくなりません。
width:autoで固有サイズの原寸になっているため、原寸が上限になります。

%の対象が自分自身になったのではなく、上限が固有サイズとなります。
max-widthプロパティの計算値が画像より小さくなる場合は、親要素に対する相対的なサイズで表示されます。

img要素に、width :100%を指定してからmax-width :100%を指定すると、自分自身の原寸サイズではなく親要素の幅に追随します。上限が親要素の幅いっぱいだからです。
widthプロパティの値がauto(デフォルト値)の場合、置換要素は固有サイズが上限になると覚えましょう。

▲目次へ戻る

5.最大値や最小値の使用場面

max-width等4つのプロパティは、ユーザが自由にサイズを変えられる要素(textarea要素など)で、サイズをこれ以上大きく(または小さく)させたくない場合に使用すると便利です。
設問がたくさんあるようなフォームの場合は、入力欄が際限なく大きく(または小さく)なるよりも、ある程度サイズを制限しておいたほうが、ユーザも使いやすいからです。

また、親要素の幅に追随するレイアウトで、これ以上大きく(または小さく)なると読みにくかったり、見た目が変だったりする場合も、便利に使用できます。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です