ほんっとにはじめてのHTML5とCSS3：【16-2】下限の min-width, min-height 上限の max-width, max-height

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

最終更新日：2017年11月14日　（初回投稿日：2016年03月05日）

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

本日のINDEX

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でも自分の原寸より小さければ縮小されますね。

サンプルの CSSです。

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 プロパティは値が他にもたくさんあり、ボックスモデルの要とも言えるプロパティです。
値が多岐にわたっているので、何回かに分けて記事にする予定です。

関連記事

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

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

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2017-11-14（Tue）│
投稿日：2016-03-05（Sat）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿