【16-2】下限の min-width, min-height 上限の max-width, max-height

最終更新日:2017年09月23日  (初回投稿日:2016年03月05日)

前回に引き続き、ボックスの「幅」や「高さ」を指定するプロパティです。
今回は、
幅の最小値(下限)を指定する min-widthプロパティ、
高さの最小値(下限)を指定するmin-heightプロパティ、
幅の最大値(上限)を指定する max-widthプロパティ、
高さの最大値(上限)を指定するmax-heightプロパティを使ってみよう。
min は minimum(ミニマム=最小限度)、max は maximum(マキシマム=最大限度)の略です。

本日のINDEX
  1. 最小値(下限)を指定する min-width と min-height の値
  2. 最大値(上限)を指定する max-width と max-height の値
  3. <img>要素での max-width :相対値 の上限は「原寸」
  4. 「max-」「min-」はどんなシーンで使う?

4つのプロパティの注意点は、width と height と同じで、下記のものがあります。

インラインの要素には不可。ただしインラインの中でも 置換要素 なら使えます。

置換ちかん要素とは、中身がほかのモノに置き換えられる要素で、中身がテキストでなく画像など他のファイルが入るので、自然に幅や高さができる要素。その代表格は <img>要素です。
*置換要素については【9】HTML要素の インラインレベル・ブロックレベル についてで もう少し詳しく説明しています。

マイナスの値はダメ
Content Box の領域の幅と高さを指定するのがデフォルト。
border や padding を幅や高さに含めたいなら box-sizingプロパティで範囲を変更します。
box-sizingプロパティについての詳細は【10】ボックスモデル(margin, padding, border を使いこなそう)をご覧ください。

最小値(下限)を指定する min-width と min-height の値

min-widthプロパティと min-heightプロパティは、幅や高さの最小値(下限)を指定。
これより小さくしたくないという値を指定します。

min-width と min-height で使える値は同じで、以下のものがあります。
inheritを使えるのが特徴。親要素に min-width または min-height の指定がある場合、それを継承し、それより小さくなりません。
デフォルト値は 0。最小サイズは0になっちゃうってことですね。そんなブラウザあんまり無いけどね。

inherit 親要素の min-width または min-height の値を継承します。
数値 px や em などの単位を付けて指定します。デフォルト値は「0」
% 親要素の幅に対するパーセント
値の継承 なし 適用できる要素 全部(ただし、table関連の行には不可

最大値(上限)を指定する max-width と max-height の値

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

max-width と max-height の値は同じで、以下のものがあります。
none がデフォルト。リミット無し。デフォのままだと上限無く大きくなれるんですね。

none 上限無し。これがデフォルト値
数値 px や em などの単位を付けて指定します。
% 親要素の幅に対するパーセント
値の継承 なし 適用できる要素 全部(ただし、table関連の行には不可

<img>要素での max-width :相対値 の上限は「原寸」

前回の【16-1】幅の width、高さの heightプロパティで、
<img>要素などの 固有のサイズを持つ 置換要素 は、width:auto で そのサイズの原寸になるんでしたね。

max-width は「上限」ができるのが特徴ですが、その「上限」を計算するのに関わってくるのが width の値です。

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

%の対象が自分自身になったわけではなく、上限が固有サイズなだけ。
max-width の計算値が画像より小さくなれば、ちゃんと親に対して相対的なサイズで表示されます。

文章で読むとややっこしいですね。
サンプルで確認しましょう。PCビューでの比較ですので、スマホの方は分かりにくいと思う。
使用している画像は↓コレ。画像サイズは430×143px。親要素の幅は600pxです。

↓ここからサンプルです(<img>要素の高さはすべて height:auto です)

img {width: 100%} ...親要素の幅いっぱいに拡大します。 img {max-width: 100%} ...画像の原寸(430×143)より大きくなりません。

これは <p>要素を max-width: 100% にしています。
中身がテキストだと固定幅は無いので、max-width:100% にすれば、親要素に対しての幅100%を保ちます。

これは <div>要素で、max-width: 80% と指定しています。親要素に対して80%の幅(600pxの80%=480px)になってます。
img {max-width: 80%} ...置換要素だと、親の幅の80%が自分より大きければ拡大されません。 img {max-width:100em} ...emという相対値でも同じですね。マックスは自分のサイズ。 img {max-width:50%} ...親要素の50%幅(300px)に。画像の幅の50%(215px)じゃないよ。 img {max-width:20em} ...emでも自分の原寸より小さければ縮小されますね。
div#smp4 {margin:2em 0;padding:0; font-weight:bold; color:#579961}
div#smp4 img {
	display:block;
	margin:0 0 2em;
	height:auto /*画像の高さはすべてautoでアスペクト比を保ちます*/}
div#smp4 p, div#smp4 div {
	margin:0 0 2em;
    background:#ffc}
div#smp4 img:nth-child(1) {width:100%}
div#smp4 img:nth-child(2) {max-width:100%}
div#smp4 p:nth-child(3) {max-width:100%}
div#smp4 div:nth-child(4) {max-width:80%}
div#smp4 img:nth-child(5) {max-width:80%}
div#smp4 img:nth-child(6) {max-width:100em}
div#smp4 img:nth-child(7) {max-width:50%}
div#smp4 img:nth-child(8) {max-width:20em}

<img>要素に width :100% を指定してから max-width :100% を指定したなら、自分の原寸サイズは無視して親の幅に追随します。上限が親要素の幅いっぱいだから。OK?
width がデフォの auto のときは、置換要素は固有サイズが上限になると覚えておこう。ややこしいけど。

「max-」「min-」はどんなシーンで使う?

じゃ、「max-」「min-」のプロパティは、実際どんなシーンで使うかですが、
ユーザが自由にサイズを変えられる要素(例えば <textarea>要素のようなフォームの部品)で、サイズをこれ以上大きく(小さく)させたくない時に便利です。
設問がたくさんあるフォームの場合は、<textarea>が際限なく大きく(小さく)なるよりも、ある程度サイズを制限しておいたほうが、書くほうも使いやすいから。

他には、親要素の幅に追随するレイアウトのとき、これ以上大きく(小さく)なったら読みにくいし見た目が変だというときに使うかな。

考えてみたら <img>などの固有サイズを持つ置換要素は、width で指定するだけで十分なことが多いので max- , min- を使うことって少ないかも。(単なる私感ですが...)

サンプルを用意しました。<textarea>要素や <div>要素に 幅や高さの制限をしています。
クリック↓で 別ウィンドウで開きます。(★PCのみ★ スマホでは自由にサイズ変更できないのでイミ無いです)

次回予告

次回からは display プロパティ
今回も visibility: hidden との比較のために display: none が出てきましたが、
display プロパティは値が他にもたくさんあり、ボックスモデルの要とも言えるプロパティです。
値が多岐にわたっているので、何回かに分けて記事にする予定です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.