2019/07/05)この記事ではmax-widthとmin-widthの使い方や、効かない時の対処法を解説します。くまmaxとminだからなんとなくイメージはつくなあざらし横幅の最大値や最小値を決められるんだ!詳しく解説していくよmax-widthやmin-widthは、要素の横幅の最大値や最小値を指定するプロパティです。使えるようになるとより複雑な表現ができるようになるので覚えておくと便利です。この記事を読むことで下記のようなことが理解できると思います。まとめmax-width、min-widthとはmax-widthやmin-widthは、要素の横幅の最大値や最小値を指定するプロパティです。max-widthは要素の横幅の最大値を指定し、min-widthは要素の横幅の最小値を指定します。max-width要素の横幅の最大値を指定します。min-width要素の横幅の最小値を指定します。max-widthのイメージ例えば、横幅(width)が100%のボックスを考えてみましょう。横幅(width)が100%の要素は親要素いっぱいに広がります。祖先要素に横幅を指定していなければブラウザの左右いっぱいに広がります。max-widthを使えば、「基本は横幅100%だけど、500px以上は大きくならないようにしたい!」というような表現が可能になります。くまそんなケースあるのか?あざらし結構あるんだ!例えばスマホでは100%で良いけど、パソコンで100%だと大きすぎる!とかね実際にそのようなケースを解決するには下記のように書くと良いでしょう。500px;このように指定することで、基本の横幅は100%、横幅の最大値は500pxを指定したことになります。普段は100%の横幅ですが、500pxを超えるような場合はそれ以上広がらなくなります。min-widthのイメージmin-widthはmax-widthの逆で、横幅の最小値を指定する事ができます。横幅が30%のボタンを考えてみましょう。祖先要素に横幅が指定されていないと仮定すると、ボタンはブラウザの幅の30%になります。問題ないように見えますが、画面幅を縮めていくとボタンも合わせて小さくなるため、画面幅ある程度小さくなるとボタンが小さくて使いづらいということが起こります。くまスマホの方は小さすぎて押しづらそうだよ...こういった場合に、min-widthで最小値を指定しておけば、ボタンの使いやすさを保つ事ができます。下記の例を見てみましょう。200px;このように指定することで、基本の横幅は30%、横幅の最小値は200pxを指定したことになります。普段は30%の横幅ですが、画面を縮めても200pxより小さくなることはありません。あざらしどんな横幅のデバイスで見られるか分からないから、こういう設定は大切だよmax-widthやmin-widthの使い方max-widthやmin-widthは、数値で指定するかnoneを指定します。none最大値・最小値の制限をしません。em...)で指定します。max-widthを使ってみようmax-widthは横幅の最大値を指定することができます。上述したとおり、「スマホでは100%に広がって欲しいいけど、パソコンで100%まで広がると大きすぎるなあ」という場合などによく使われます。実際に使ってみましょうこの例では、子要素にmax-widthを設定したものと、してないものでどういう違いが出るか確かめてみます。150px;を設定したほうは、横幅が150pxになっているのがわかります。【小技】画像にmax-widthを使う画像の横幅にmax-widthを使う方法もよく使われます。}width:300pxのボックスこの例の場合、画像にmax-widthに100%を設定しています。仮にこの指定がなければ、画像は親要素よりも大きい画像を使っているので、親要素をはみだして表示されてしまいます。親要素をはみ出さないようにするには、width:100%を指定するmax-width:100%を指定するという2つの方法があります。どちらも同じように見えますが、「width:100%」を使うと「常に親要素の100%」という意味になるので、たとえば画像が親要素より小さい場合でも引き伸ばして表示されることになります。画像を引き伸ばすと荒れます。一方で「max-width:100%」を使うと「最大で親要素の100%」という意味になるので、親要素より画像が大き場合は親要素いっぱいになり、親要素より画像が小さい場合は画像のサイズで表示されます。拡大された画像は劣化が激しくサイトのイメージを大きくそこなってしまうため、拡大したくない場合はmax-widthを使いましょう。min-widthを使ってみようmin-widthは横幅の最小値を指定することができます。max-widthとは逆で、小さくなりすぎなようにしたい場合に使います。実際に使ってみましょうこの例では、子要素にmin-widthを設定したものと、してないものでどういう違いが出るか確かめてみます。}親要素min-widthありmin-widthなし2つの子要素にはwidth:100%を指定しているので、基本は親要素と同じ横幅になります。片方にだけmin-width:350pxを設定し、横幅の最小値を設定しています。親要素の横幅を300pxにしているので、min-widthを設定した方が結果的に親要素をはみ出しているのがわかります。このようにmin-widthを使うことでこれ以上小さくならないという制限をかけることができるんですね。あざらしスマホで小さくなりすぎないように使う事が多いよmax-widthが効かない場合の対処法floatした要素にmax-widthが効いていない?floatしてる要素にmax-widthを指定しても思った通りの横幅にならない事があります。そのような場合は、width:100%を追加してあげる事で解決します。事例を見てみましょう。100px;}ノーマルfloatしてる要素この例の場合、どちらの要素にもmax:widthを指定していて、違う点はfloatしているかしていないかだけです。感覚的には同じ横幅になりそうですが、floatしている要素の方が小さいですね。floatしたら横幅が100%ではなくなるこれは、「floatした要素は横幅が中身に応じて可変になる」ため起こります。floatしていなければ、p要素は表示形式がブロックにため、横幅が親要素いっぱいに広がろうとします。200px;を指定しているので、200pxの横幅になります。floatしている要素は「横幅が中身に応じて可変になる(インラインのようなイメージ)」なので、中身のコンテンツが短ければ短いほど要素の横幅も小さくなります。max-widthまで届いていないので、要素の横幅は中身のコンテンツまで縮むことになります。100%;を明示して横幅を親要素いっぱいに設定してあげると良いでしょう。表示形式ブロックやインラインについてよく分からない方は、下記の解説が参考になります。参考記事CSSのインライン(inline)とブロック(block)について解説この記事ではインライン要素とブロックレベル要素について解説していきます。重要なことを述べますが、「インライン要素」「ブロックレベル要素」という概念はHTML5ではなくなりました。[...]paddingやborderをつけるとmax-widthより大きくなるborderやpaddingをつけた要素は大きさがwidthで指定しているよりも大きくなります。max-widthを100pxに指定したボックスを二つ用意して、片方にだけborderやpaddingを指定してみます。tomato;}border,paddingなしborder,paddingありborderやpaddingを指定している方が大きくなっているのがわかります。いう事が起きるのかを理解するには、HTMLのコンテンツモデルを知る必要があります。コンテンツモデル図のように、要素はwidthの外側にpaddingやborderの領域があります。今回の場合はwidthは両方200pxですが、一方はpaddingとborderが加算された分、要素としては大きくなっているんですね。コンテンツモデルについては下記の記事で詳しく解説しているので参考にしてください。【css】marginとpaddingの使い方や違いを解説この記事ではCSSのmargin(マージン)とpadding(パディング)について、それぞれの使い方や違いをわかりやすく解説していきます。親要素をはみ出さないように、max:widthに100%を指定した画像があるとします。普通であれば親要素いっぱいに広がりはみ出すことはありませんが、borderやpaddingを設定するとその分大きくなるので親要素からはみでます。}border,paddingなしborder,paddingありborderやpaddingを設定した方が親要素からはみ出していますね。横幅が親要素の100%になるような画像は、うかつにpaddingやborderを設定するとこのようなことが起こるので注意が必要です。対応方法!box-sizingを使おうこのようなはみ出す現象を解決するには、box-sizingを使います。box-sizingはボックスサイズの算出方法を指定するプロパティで、これを変更することで、横幅にborderとpaddingを含むように変更できます。以下の一文をCSSに追加するだけで解決します。border-box例を見てみましょう。}border,paddingありboprderやpaddingを指定していますが、横幅(width)にborderやpaddingを含むように設定されているため、はみ出さなくなっているのがわかります。box-sizingについては下記の記事で詳しく解説をしているので参考にしてください。横幅100%で親要素をはみ出す時はbox-sizingを使おうこの記事では子要素が横幅100%にも関わらず、親要素をはみ出してしまう原因と、対処法であるCSSの「box-sizing」について解説します。横幅100%でもボーダーや余白があると親要素をはみ出します。[...]その他のIE11の仕様IE11の場合、様々なシチュエーションでmax-widthが効かないというバグがあります。これらはどのような条件で起こるかよって解決方法が違います。全て解説すると物凄い量になるので詳細は省きますが、どういう要素でどんな時に効かないのかを具体的にぐぐればほとんどの場合解決策は出てきます。IE11は開発元のマイクロソフトが使わないことを推奨しているほど古いブラウザでバグも多数あります。世界的なシェアも3.1%とかなり使っている人は少なくなってきています。日本ではいまだに10%強の人が使っているので、ちょっと面倒ではありますがIE11でも動作確認をして対応して行った方が良いでしょう。あざらしIEは昔からバグが多くて開発者を悩ませているんだ!まとめmax-widthは要素の横幅の最大値を指定するmin-widthは要素の横幅の最小値を指定するfloatした要素にmax-widthが効かない場合は、「width:100%」を追記しようpaddingやborderがあると、widthより大きいボックスになるbox-sizingを使えば、横幅にpaddingやborderを含む事ができるIE11には数々のバグがあるが、バグの種類によって対応方法全く違うのでその都度調べようすずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。ウェイト)の使い方html&CSS入門すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。