Webサイト制作の基本であるCSSを学んでいると、「max-width」や「min-width」といったプロパティに出会うことがよくあります。これらのプロパティは、画面サイズが異なるさまざまなデバイスに対応したレスポンシブデザインを作成する際に特に重要です。
しかし、「width」との違いや具体的な使い方が分からず、つまづくことが多いのも事実です。
この記事では、max-widthとmin-widthについて初心者の方にも分かりやすく解説します。
それぞれのプロパティの働き、違い、そして実際の使用例を見ていきます。
widthとは要素の幅を指定するプロパティ
まず、今回の記事を見ていく上で前提として知っておくべきプロパティのwidthについて簡単におさらいしておきましょう。
widthとは
CSSにおけるwidthプロパティとheightプロパティは、要素の幅と高さを指定するために使用されます。これらのプロパティを使うことで、画像、テキストボックス、ボタンなど、さまざまな要素のサイズを自由に設定できます。
widthについて全くわからないという方は、こちらの記事で詳しく書いていますので、そちらを読んでからこちらの記事を読むとぐっと理解が深まります。
max-width と min-width の違い
まず、max-widthとmin-widthの違いについて理解しましょう。
max-width
「max-width」は、要素の最大の幅を指定します。
ブラウザの画面サイズがどれだけ大きくなっても、指定した最大幅を超えないように要素を制約するものです。例えば、テキストや画像がウィンドウの幅いっぱいに広がらないようにしたいときに使用します。
min-width
一方、min-widthは、要素の最小の幅を指定します。
ブラウザの幅がどれだけ小さくなっても、要素が設定された最小幅を下回らないように制約します。これにより、重要なコンテンツが極端に小さくなってしまうのを防ぎます。
これら2つのプロパティは、要素のサイズを調整して、デザインの柔軟性を保ちながらも、極端な幅の変動を防ぐために使われます。
基本的な使い方
では、それぞれの使い方を具体的なコード例とともに見ていきましょう。
max-width の例：
.container {
max-width: 600px;
margin: 0 auto;
}この例では、.containerクラスに対して最大幅600ピクセルを指定しています。ブラウザの幅が600px以上になった場合でも、コンテナの幅は600pxを超えません。また、margin: 0 auto;を指定することで、コンテナがブラウザの中央に配置されます。
min-width の例：
.container {
min-width: 300px;
margin: 0 auto;
}この例では、.containerの最小幅が300pxに設定されています。ブラウザの幅が300px未満になった場合でも、コンテナの幅はそれ以上を保ち、コンテンツがつぶれるのを防ぎます。
max-width と min-width が必要な理由
スクリーンサイズに応じた要素の調整
「width」を使うと要素の幅が固定されるため、画面のサイズに合わせて自由に変化しません。しかし、max-widthやmin-widthを使用すれば、画面サイズに応じた調整が可能です。
例えば、テキストの読みやすさを保ちながら、画像が必要以上に拡大されないように設定することができます。
レスポンシブデザインにおける重要性
レスポンシブデザインは、PC、タブレット、スマートフォンなど、さまざまなデバイスで適切に表示されるWebサイトを作るための設計手法です。これにより、画面サイズが異なるデバイスでWebページが美しく、使いやすく表示されるように調整します。
例えば、画像がスマートフォンの画面全体に広がるのは不適切ですし、逆に、画面が大きいデスクトップではコンテンツが狭すぎて見にくい場合もあります。ここで役立つのがmax-widthとmin-widthです。これらを使うことで要素の幅を柔軟に調整しつつ、極端な表示の崩れを防ぐことができます。
実際のコード例と結果の確認
では、レスポンシブデザインを考慮したコードの例を見てみましょう。
下のコードを簡単に説明すると、親要素のdiv（containerクラス）と、その中にタイトル、テキスト、画像が入っています。
cssは、親要素に対してmax-width: 800px; min-width: 500px;と最大値と最小値を指定。また、子要素の画像に対して最大値であるmax-width: 100%;を指定しています。
画面幅を大きくしたり小さくすることで、各要素の幅がどのように動作するのか確認してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.responsive-image {
max-width: 100%;
height: auto;
}
.container {
max-width: 800px;
min-width: 500px;
margin: 0 auto;
}
</style>
<title>レスポンシブデザインの例</title>
</head>
<body>
<div class="container">
<h1>レスポンシブなWebページ</h1>
<p>このページでは、画像やコンテナが画面サイズに応じて調整されます。</p>
<img src="example.jpg" alt="サンプル画像" class="responsive-image">
</div>
</body>
</html>実際に上のコードをブラウザに表示したのが下の動画です。
動画では画面幅が大きい状態から始まり、徐々に画面幅を小さくして左右にスクロールできることを確認して、画面幅を再度大きくしています。
それでは画面幅に応じてそれぞれの要素がどのような挙動をしていたのかを解説していきます。
親要素であるdivは、画面幅の大きな状態では、最大値（max-width）として指定された800pxを最大として表示されています。徐々に画面幅が小さくなり、800pxを下回ると画面幅いっぱいに表示しようとします。また、画面幅が最小値（min-width）で指定した500pxを下回ると、親要素は幅500pxを維持し続けるため、画面の右へ要素がはみ出します。そのため、画面の右へスクロールができるようになっています。
今度は子要素のタイトルとテキストと画像についてみてきましょう。
タイトルとテキストにはcssで幅の指定をしていないので、常に親要素の幅いっぱいに表示されます。
画像にはmax-width: 100%;として、常に親要素を超えないように最大値を指定をしています。
要するにタイトルもテキストも画像も常に親要素の幅いっぱいに広がルような指定になっています。
よって、画面幅が大きい時は最大値の800pxで表示されるし、画面幅が800px以下であれば親要素と同様に画面いっぱいに表示されます。また、画面幅が500px以下の場合は親要素と同様に画面からはみ出して表示されます。
このように、幅の最大値であるmax-widthと最小値であるmin-widthを使うことで、画面幅に応じてどのように表示するのか指定することができます。これは、cssレイアウトをしていく上でとても重要になります。
6. まとめ
max-width と min-width は、レスポンシブデザインにおいて非常に重要なプロパティです。これらを適切に活用することで、さまざまなデバイスに対応した見やすいレイアウトを作ることができます。max-widthで要素の広がりを制限し、min-widthで重要なコンテンツの縮小を防ぎましょう。
コメント