【CSS】max-widthとmin-widthの使い方｜HTML＆CSS入門講座（7）

目　次

はじめに
max-widthとは？、min-widthとは？
max-widthの使い方
min-widthの使い方
おわりに

はじめに

　HTML＆CSS入門講座の第七弾として、【CSS】max-widthとmin-widthの使い方ついて紹介します。

　この記事を読むと次の疑問について知ることができます。

●max-widthとは？、min-widthとは何ですか？
●max-widthの使い方はどうするの？
●min-widthの使い方はどうするの？

　HTML＆CSS入門講座（6）では、CSSの中のwidth（幅）とheight（高さ）の指定方法について解説してきました。

　CSSの中のmax-widthとmin-widthの使い方ついて深堀していきます。

max-widthとは？、min-widthとは？

　max-widthとは、「幅の広さが「max-width」で指定した値を超えないようにする指定方法なんです。

　また、min-widthとは、「幅の広さが「min-width」で指定した値より小さくならないようにする指定方法」なんです。

　今は、スマホでWebページを見る方が増えており、実際に私のブログも約70％はスマホで見られています。

　パソコンとスマホでは画面サイズが異なり、同じように見易い画面で見せる技術がレスポンシブルデザインと言う技術ですが、このレスポンシブルデザインには欠かせないCSSの使い方になるのです。

　そして、これらmax-width、min-widthは、widthの％指定と一緒に利用されることが多いです。

max-widthの使い方

　ある画像をスマホで見た場合に、丁度よい大きさに見えても、パソコン画面の大きな画面で見るとデカすぎる大きさに見えてしまい、バランスの良くない画面だと感じることがあります。

　そのような場合に、このmax-widthを使います。

　つまり、パソコンで見た場合にこれ以上大きく見えないようにmax-widthで指定してやるわけです。

それでは実際に、実例を書いてみましょう。

 <h1>親要素が小さめの場合</h1>
<div class="maxwidthtest1">
<h2 class="nomax">これは最大幅なしの場合</h2>
<h2 class="max">これは最大幅400pxと指定した場合</h2>
</div>
<h1>親要素大きめの場合</h1>
<div class="maxwidthtest2">
<h2 class="nomax">これは最大幅なしの場合</h2>
<h2 class="max">これは最大幅400pxと指定した場合</h2>
</div>

.maxwidthtest1 {
/*親要素が小さめの場合*/
width: 400px;
background-color: blue;
}
.maxwidthtest2 {
/*親要素大きめ*/
width: 600px;
background-color: blue;
}
.nomax {
/*最大幅なしの場合*/
background-color: red;
width: 80%;
}
.max {
/*最大幅ありの場合*/
background-color: green;
width: 80%;
max-width: 400px;
}

　結果は次の通り。

　親要素が小さめの場合（幅400px)を見ていきましょう。

　最大値を設定していない赤要素も、最大値を指定している緑要素も、親要素の幅の80％＝320pxとなり、最大値が400pxより小さいために、そのまま赤と緑の子要素が2つ共に幅320pxで表示されています。

　一方、親要素が大きめの場合（幅600px）を見てみましょう。

　この場合は、最大値を設定している赤要素は、親要素の80％＝480pxで表示され、緑の最大値を設定している方は、最大設定値400px＜緑要素の親要素の80％=480pxであるために、緑要素は400pxに抑えられて表示されることになっています。

　今度は画像で見てみましょう。

<p>
<img src="https://yanai-ke.com/wp-content/uploads/2020/07/ponponmamu.jpg" alt="黄色のポンポンマムの花だよ！" />
</p>

img {
width: 300px;
height: 300px;
max-width: 100%;
}

　結果は次の通り。

　左の図は、上述のCSSで「width: 300px;、height: 300px;」指定したために、本来の画像より縦に伸びたような画像となっています。

　このようなことが、スマホなどの小さな画面で見た時に起きることになります。

　それを防ぐのが、「height: auto」を設定することです。

　そうすることにより右の図のように、幅300pxに縮小された本来の画像が見れるようになります。

min-widthの使い方

　ある画像をパソコンで見た場合に、丁度よい大きさに見えても、スマホの小さな画面で見ると小さすぎる大きさに見えてしまい、バランスの良くない画面だと感じることがあります。

　そのような場合に、このmin-widthを使います。

　つまり、スマホで見た場合にこれより小さく見えないようにmin-widthで指定してやるわけです。

　それでは実際に、実例を書いてみましょう。

<h1>親要素大きめの場合</h1>
<div class="minwidthtest1">
<h2 class="nomin">これは最小値幅なしの場合</h2>
<h2 class="min">これは最小値400pxと指定した場合</h2>
</div>
 <h1>親要素が小さめの場合</h1>
<div class="minwidthtest2">
<h2 class="nomin">これは最小値幅なしの場合</h2>
<h2 class="min">これは最小値400pxと指定した場合</h2>
</div>

.minwidthtest1 {
/*親要素が大きめの場合*/
width: 600px;
background-color: blue;
}
.minwidthtest2 {
/*親要素小さめの場合*/
width: 400px;
background-color: blue;
}
.nomin {
/*最小幅なしの場合*/
background-color: red;
width: 50%;
}
.min {
/*最小幅ありの場合*/
background-color: green;
width: 50%;
min-width: 400px;
}

結果は次の通り。