この記事ではimg画像を用いて、widthとmax-widthの違いと使い方を紹介。
また、min-widthについても説明します。
記事を読めば、違いを理解して使いこなせるようになるはずです。
widthとの違いが分からない方は、ご覧ください。
※この記事は「imgの使い方と表示ルール」の3回目です(全3回)。
【imgの使い方と表示ルール①】画像サイズの決まり方
【imgの使い方と表示ルール②】object-fitとobject-positionの使い方
widthとmax-width・min-widthの違い
widthとmax-width、min-widthの違いはこちらです。
| width | 要素の幅 |
| max-width | 要素の最大幅 |
| min-width | 要素の最小幅 |
widthは要素の幅を決めるプロパティ。
一方、max-widthは要素の最大幅を指定します。
また、最小幅を決めるのがmin-width。
【参考記事】css指定の書き方
最大幅・最小幅
- (最大幅)
max-width: 500pxだと500pxよりも大きくならない。 - (最小幅)
min-width: 100pxなら100pxより小さくならない。
ポイントは3つとも別のプロパティということ。
レスポンシブに対応させるために必要な指定です。
max-width・min-widthは、widthと合わせて指定する
max-widthとmin-widthは、widthと合わせて使う場面が多いです。
ですのでまずは、いっしょに使う指定方法を覚えましょう。
指定の手順
指定は以下の手順となります。
- widthを指定
- max-width or min-widthを指定
はじめに要素の幅を決める。
そのあと、最大または最小幅を指定する流れです。
値
max-widthとmin-widthで指定できるおもな値は、pxと％。
- px（要素の幅の大きさを直接指定）
- %（親要素の幅に対する割合）
ほかの値もありますが、この2つを覚えておけばOK。
次からは widthと合わせた実際の使い方を紹介していきますね。
max-widthの指定例
max-widthは要素の最大幅を決めるものでした。
(例) max-width: 500pxだと500pxよりも大きくならない。
使い方のパターンは2つあります。
- スマホ→パソコン(画面幅：小→大)
- パソコン→スマホ(画面幅：大→小)
※画面幅 … <body>の幅のこと。
さいしょは、「スマホ→パソコン」から。
スマホ→パソコン(画面幅：小→大)
画面幅が大きくなるのに合わせて画像幅も大きくなる場合、最大幅を設定します。
よく使うパターンです。
- widthに％を指定。
- max-widthにpxを指定。
画面幅の広がりとともに<img>の画像幅も大きくなります。
ですので、画像幅をある数値より大きくしないようpxで指定。
こちらをご覧ください。
<body>
<img src="airport.png" alt="空港">
</body>
<!-- 親：body 子：img -->img {
width: 100%;
max-width: 700px;
}
/* width: 100%は、親であるbodyの幅に対しての割合 */
使い方の流れ
画面幅が広がる
↓
％指定の画像幅も広がる
↓
画像幅が大きくなりすぎないようmax-widthをpxで指定
この最大幅の設定はイメージしやすいと思います。
※こちらで上の画像が見れます。そのうえで検証画面を開き、画面幅を広げてください。画面幅が700px以上ではmax-width: 700pxが効いて、画像がそれ以上大きくならないはずです。
【参考記事】chrome検証ツールの使い方
max-widthを指定した画像を画面の真ん中にする
上記で画像に最大幅を指定しましたが、左に寄っていました。
その画像を真ん中にする方法を解説します。
先ほどの場合だと<img>の親は<body>。
なので、<body>にtext-align: centerとすればオッケー。
※text-alignはブロック要素に指定すると、子であるインライン要素に効きます。
<body>
<img src="airport.png" alt="空港">
</body>body {
text-align: center;
}
img {
width: 100%;
max-width: 700px;
}
もし、<div>などで<img>を囲んでいたら？
<body>
<div>
<img src="airport.png" alt="空港">
</div>
</body>上記のコードだと、<img>は<div>に囲まれています。
この場合は<div>にmax-width: 700px・margin: autoを指定しましょう。
加えて<img>にはwidth :100%として、<div>と同じ幅にします。
そうすれば画像は真ん中にきます。
<body>
<div>
<img src="airport.png" alt="空港">
</div>
</body>div {
max-width: 700px;
margin: auto;
}
img {
width: 100%; /* 親であるdivの幅に対しての割合 */
}
max-widthは<div>などのブロック要素にも効くので、このように指定できます。
おそらく、<img>は<div>などで囲われているケースが多いはず。
ですので、こちらの使い方を覚えておきましょう。
【参考記事】text-align: centerが効いていないように見える理由と対処法
<div>にはwidth: 100%は指定しなくていいの？と思った人へ
さらに補足です。
<div>はブロック要素なので、widthの指定をしないと初期値autoとなります。
autoだと、親要素(ここでは<body>)いっぱい広がります。
『子要素のwidth指定なし』
親要素の幅 = 子要素の幅(ブロック要素)
になるので、ブロック要素にwidth:100%の指定は一般的にはしません。
【参考記事】width:100%が効かない！の「autoと100%の違い」の項目
クリックすると、該当箇所にジャンプします。
蛇足が長すぎました。すみやかに、次へ。
パソコン→スマホ(画面幅：大→小)
今度は先ほどと逆で、画面幅がせまくなっていく場合です。
- widthにpxを指定。
- max-widthに%を指定。
widthにはpx値を、max-widthには%値を指定。
これは先ほどと逆ですね。
押さえてもらいたいのが、画面幅と画像幅の大きさ。
「画面幅 ＜ 画像幅」の場合、画像が画面に入りきれません。
つまり、横スクロールが発生する状態。
ですので、 max-widthを指定することで画像が収まるようにします。
イメージしづらいはずなので、以下をご覧ください。
<body>
<img src="airport.png" alt="空港">
</body>img {
width: 600px;
max-width: 100%;
}
使い方の流れ
画面幅がせまくなる
↓
px指定の画像幅が入りきらなくなる
↓
画像幅が収まるようmax-widthを%で指定
※こちらのページを開き、検証で画面幅をせまくしてください。画面幅が600px以下で、max-width:100%が適用され画面の中に収まるようになります。
つまり、画面幅がせまくなる時、画像幅がはみ出ないようmax-width: 100%とします。
しかし、画面が小さくなっていく時、max-widthを使うのが馴染めないかもしれません。
ですので自分でコードを書き、実際にそうなるのを検証画面で確かめてみましょう。
そうすると、実感しやすいです。
<img>にmax-widthだけ％指定してある場合
ほかのサイトを見ていると、<img>にmax-widthだけ％指定してある場合があります。
<body>
<img src="airport.png" alt="空港">
</body>img {
max-width: 100%;
}上記コードではwidthの指定がありません。
この場合、<img>のwidthは画像本来の大きさで表示されます。
※<img>のwidthが未指定だと、初期値autoを適用。
【参考記事】画像の大きさの決まり方｜css指定の「なし・あり」
画像本来の大きさということは、px値です。
というわけで、画面幅がせまくなっていく時、max-widthが適用されるパターンとなります。
仮に画像本来の幅が800pxなら、画面幅800px以上では画像幅800pxで表示。
画面幅が800px未満でmax-width: 100%が効き、「画面幅 ＝ 画像幅」となります。
min-widthの指定例
min-widthは、要素の最小幅を指定します。
(例) min-width: 100pxなら100pxより小さくならない。
使いどころとしては、
- パソコン→スマホで画面幅が小さくなっていく
のパターンがあります。
パソコン→スマホ(画面幅：大→小)
画面幅がせまくなっていく時の指定です。
- widthに%を指定。
- min-widthにpxを指定。
widthには%値を、min-widthにはpx値を指定します。
使い方の例を見てみましょう。
<body>
<img src="harbor.png" alt="港">
</body>img {
width: 50%;
min-width: 300px;
}
/* width: 50%は親であるbodyの幅に対する割合 */
使い方の流れ
画面幅がせまくなる
↓
％指定の画像幅も合わせて小さくなる
↓
画像幅が小さくなりすぎないようmin-widthをpxで指定
※同じように画像を用意しました。こちらをクリックして検証画面で、画面幅をせまくしてください。画面幅が600px以下では、min-width: 300pxが効いて画像がそれ以上小さくなりません。
ご覧のように、min-widthは見やすさをギリギリ保つための指定ですね。
ただし、min-widthも慣れないとしっくりこないはず。
そんなわけで、実際に試しながら画像の大きさを確認してみてください。
〇〇pxより小さくならないと指定したら、画面幅からはみ出すのでは？
上記でmin-width: 300pxと指定しました。
ただし、画面幅が300px以下だと「画面幅 ＜ 画像幅」となり、横スクロールが発生します。
つまり画面から画像がはみ出した状態。
ですがスマホの画面幅は350px以上のものがほとんど。
なので、画像の最小幅を300pxに指定しても画面からはみ出ることはありません。
参考サイト
今さらですが、「max-width・min-width」についてはCSS3をもとに紹介しました。
CSS3とは、cssのルールブックみたいなもので、その最新版です。
- 「max-width」MDN Web Docs
- 3.1.3. 最大サイズ プロパティ：’max-width’および’max-height’プロパティ「CSS ボックスサイズ 変更 モジュール レベル 3」W3C
- 「min-width」MDN Web Docs
- 3.1.2. 最小サイズ プロパティ：’min-width’および’min-height’プロパティ「CSS ボックスサイズ 変更 モジュール レベル 3」W3C
ぜんぶ、翻訳ありです。
やや専門的に書かれてるので、お気をつけを〜
まとめ
今回は、max-width・min-widthについて解説しました。
まずは、「スマホ→パソコン」のパターンで、max-widthを使う感覚を身につけましょう。
背景画像の指定方法について
こちらは、背景画像の指定方法を3回にわたってお送りしている1回目の記事です。
画像のサイズや配置などについて解説していますので、ご覧ください。
