LINEで現役エンジニアに直接質問してみよう!登録無料

CSSのmax-width(最大幅)の使い方を理解して最適な要素幅にしよう!

この記事のまとめ

CSSのmax-widthについて解説します。

max-width要素の最小幅を決めるCSSプロパティです。最小幅を決めると、画像や要素をを必要以上に小さくならないようにできます。

スマホに対応したデザイン(レスポンシブデザイン)には必須の知識ですので、一緒に学んでいきましょう!

max-widthとは?

max-widthとは、「要素の幅がとることのできる最小幅(これ以上小さくならない幅)」を設定できます。

例えば、レスポンシブデザインに対応するサイトを作っていて「どんな大きさのブラウザでも見やすいものにしよう!」と思ったとしましょう。

pxを使ってPCの画面幅にちょうどよいWebページをつくっても、スマホやタブレットだと画面幅に収まりきらずにはみ出てしまう可能性があります。

これでは、色々な大きさのブラウザに対応したページにはなりません。

そこで、必然的に画面幅や要素の大きさでサイズが変わる%を使うことになります。

ところが、タブレットやスマホで確認すると要素のサイズが小さくなりすぎてしまうしまう不都合がおきてしまう場合があります。

スマホではもはや何が書いてあるかわかりません。

そのような時、画面幅を超えないサイズまで可変してくれたら便利ですよね?

そのような時に使うのがmax-widthです。

max-widthの使い方

いきなり例を見ていきましょう!

例えば、下記のように書くと「<img>タグは親要素より大きくはならない」という指定になります。

img {
    max-width: 100%;
}

実際にブラウザ上でどのようになるのか見てみましょう!

簡単なシュミレーションを作ってみました。「100px」「200px」「300px」のボタンがあって、それをクリックすると要素幅が変化します。

中に入っている画像には、width: 180pxが設定されています。親要素(画像を囲っている要素)の幅が180px以下になると、max-width: 100%;という決まりを侵すため、横幅は親要素と同じ幅になります。

どんな所でmax-widthは使われる?

max-widthは主に画像がスマホの画面からはみ出ないようにする為に使われます。

先程の例で、親要素の幅以上にならないようにしていましたね。

これと同じ原理で、画像が画面からはみ出ないように制限することが出来ます。

まとめ

  • max-widthを使うと「要素の最大幅」を設定できる
  • widthを同時に使うと「サイズの変化する範囲を制限」できる
  • max-widthが画面から要素や画像がはみ出ないためによく使われる
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。