ITコラム

colmun_main4861

ITコラム

2017.04.29

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

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

widthプロパティとheightプロパティについては、以下のページもご参照下さい。
CSS【 幅と高さ 】1 ~ widthプロパティ、heightプロパティ
CSS【 幅と高さ 】2 ~ min-width、min-height、max-width、max-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要素など)で、サイズをこれ以上大きく(または小さく)させたくない場合に使用すると便利です。
設問がたくさんあるようなフォームの場合は、入力欄が際限なく大きく(または小さく)なるよりも、ある程度サイズを制限しておいたほうが、ユーザも使いやすいからです。

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

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.