【CSS入門】max-width・min-widthでレスポンシブウェブデザインに対応しよう

この記事ではレスポンシブなサイトを作る上で絶対に欠かせない、CSSのmin-widthとmax-widthプロパティについて解説します。

min-widthとmax-width

PC・タブレット・スマートフォンなど様々な端末に対して、最適化された表示を行うために「レスポンシブウェブデザイン」という手法をよく使いますが、そこで重要なのがmin-widthとmax-widthです。

min-width

「これよりは小さくならない」という要素の最小幅を指定します。

以下の場合「この要素は300pxより小さくはならない」という指定になります。

HTML

<div class="box">BOX</div>

CSS

.box{
  min-width: 300px;
}

これだけだとあまり使い所がありませんが、実際にはwidth: 〇〇%;とセットで使うことにより、その特性を最大限に活かせます。

例えば、ある要素にwidth: 50%;を指定したとします。PCで見るぶんには見やすいサイズですが、それをスマホで見るとスマホの画面幅に対しての50%の幅になってしまうため小さく見えてしまいます。

それを回避するためにmin-widthを指定します。

以下の場合、要素に「min-width: 300px;」を指定しているので、「width: 50%;」を指定していても300pxより小さくならず、スマホでも見やすくなります。

HTML

<div class="box">BOX</div>

CSS

.box{
  width: 50%;
  min-width: 300px;
}

このように、PCでは幅を%指定(50%など)にしたいけど、それだとスマホで小さく表示されてしまうので、固定幅(300pxなど)にしたい時によく使います。

max-width

min-widthと反対で、「これよりは大きくならない」という要素の最大幅を指定します。

以下の場合「この要素は300pxより大きくはならない」という指定になります。

HTML

<div class="box">BOX</div>

CSS

.box{
  max-width: 300px;
}

もちろんこちらもwidth: 〇〇%;とセットで使うことにより、その特性を最大限に活かします。

例えばある要素にwidth: 100%;を指定したとします。スマホで見るぶんには見やすいサイズですが、それをPCで見るとPCの画面幅に対しての100%の幅になってしまうため、大きく見えてしまいます。

それを回避するためにmax-widthを指定します。以下の場合、要素に「max-width: 300px;」を指定しているので、「width: 100%;」を指定していても300pxより大きくならず、PCでも見やすくなります。

以下の場合、要素に「min-width: 300px;」を指定しているので、「width: 50%;」を指定していても300pxより小さくならず、スマホでも見やすくなります。

このように、スマホでは幅いっぱいで(100%)、PCでは固定幅(300pxなど)にしたい時によく使います。

便利な使い方

例えば1000pxの大きいサイズの画像をサイトに載せるとします。PCで見るぶんには何の問題もありませんが、1000px未満のタブレットやスマホなどで見ようとすると画像がウィンドウからはみ出てしまいます。

それを避けるために、max-widthを使います。方法は簡単で、画像に対してmax-width: 100%;とheight: auto;設定しておくだけです。

HTML

<img src="sample.jpg">

CSS

img{
  max-width: 100%;
  height: auto;
}

こうすることで、PCで見たときには画像は1000pxですが、スマホなどの小さい画面で見たときには画面に合わせたサイズに自動的に変更されます。

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の3点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。