width、height、max-widthについて

画像やあるコンテンツの幅を決める際に、width: 100%とmax-width(px指定)を指定してる場合、width: 100%だけ指定してる場合、width(px指定)とmax-width: 100%の場合、max-width(px指定)だけの場合などパターンが見えてこなくて困ってます。

また、width: 100%とmax-width(px指定)を指定してるもので、width: 100%を外してmax-widthだけにしても見た目が変わらないものもあったりして、変わらないならwidth: 100%いらないのではないかなど思ってしまいます。画面縮小したら変化が現れるのかと思いきや特に変わりなく、一生謎です。毎回widthだけにしようかmax-widthだけにしようか、両方指定した方がいいのかで悩みます。

色々悩んだ結果、「max~widthだけ指定の場合は、特に画面に大きく表示されなくても構わないもの、width: 100%とmax-width両方を指定する場合は、最大幅以下のサイズになったときに画面に大きく表示されてほしいもの」のような結論に至りました。が、必ずしもそんな感じでないような気もします。

是非この使い分け、何を基準にしてるのかなど、教えていただきたいです。

行動規範の内容に同意します

回答4件

HTMLのほとんどの要素はブロックレベル要素とインライン要素のどちらかに分類されます。説明しだすと長くなるので詳細は下記などを参照してください。

ブロックレベル要素とインライン要素とは？違いについて解説します | ホームページ作成入門

インライン要素の幅は内容物の幅と同じになるので、widthを設定しても無視されます。(当然max-widthも無効です。)
つまり、widthやmax-widthを設定して有効な要素はブロックレベル要素ということになります。

また、width: 100%とmax-width(px指定)を指定してるもので、width: 100%を外してmax-widthだけにしても見た目が変わらないものもあったりして、変わらないならwidth: 100%いらないのではないかなど思ってしまいます。

widthやmax-widthを指定しているので、ブロックレベル要素ということになりますが、上記のリンク先に下記の記載があります。

ブロックレベル要素は、新しい行から始まり、幅いっぱいに広がり、最後に改行されます。

つまり、width: 100%がデフォルトということです。よってwidth: 100%を外しても結果が変わらないのは当然のことです。ですので「width: 100%いらないのではないか」というご推察はあってます。

ここまで理解できればパターン化する必要はないと思われますが、あえてするなら、
ブロックレベル要素において、

バターン1

width: 100%だけ指定してる場合
width, max-width どちらも指定していない場合

→常に親要素の幅いっぱいに広がる。

バターン2

width: 100%とmax-width(px指定)を指定してる場合
max-width(px指定)だけの場合

→親要素の幅いっぱいに広がるが、max-widthで指定した幅以上には広がらない。

バターン3

width(px指定)とmax-width: 100%の場合

→widthで指定した幅になるが、親要素の幅が指定した幅以下になった場合は親要素の幅になる。

パターン2とパターン3は、
親要素の幅がpx指定した幅以上の場合はpx指定した幅
親要素の幅がpx指定した幅以下の場合は親要素の幅と同じ
ということになるので同じ結果になります。

投稿2025/04/26 02:16

hatena19

総合スコア34352

パターンが見えてこなくて困ってます。

そもそも、パターン化する必要はありません。それぞれの指定の意味を把握して指定すればいいだけの話です。

投稿2025/04/25 23:21

maisumakun

総合スコア146544

そもそも、パターン化する必要はありません。それぞれの指定の意味を把握して指定すればいいだけの話です。

色々な意見があると思いますが、cssは宣言的(手続き的の逆)なので、パターン化は必要です。それぞれの単体の意味というよりは組み合わせでどうなるか？というのが重要なイメージで、単体の意味を知っているだけではうまくレイアウトできないことがあるかと思います。

また、width: 100%とmax-width(px指定)を指定してるもので、width: 100%を外してmax-widthだけにしても見た目が変わらないものもあったりして、変わらないならwidth: 100%いらないのではないかなど思ってしまいます。画面縮小したら変化が現れるのかと思いきや特に変わりなく、一生謎です。毎回widthだけにしようかmax-widthだけにしようか、両方指定した方がいいのかで悩みます。

意味も分からず指定するのは悪習慣でしかないと思います。
widthが100%で
max-widthが1000px
だとしたら、意味だけでとらえれば最大が1000pxにしかならず、widthが100%つまり1000pxにしようとするので、全く意味はないかと思います。(というか何がしたいのかよくわからない)
また、もっと言えばパーセントは相対的なサイズなので、子要素が200000000pxみたいにめちゃくちゃでかくても親のサイズの100%は200000000pxになるはずです。(子要素によって親要素の幅が広げられるので)
また、同じ理屈でパーセントは親要素のサイズに依存もするため使い道はあるもののあまり使わないとは思います。

以下の情報が役に立つのでは。
実際に読んでるだけじゃ意味が分からないとか、こういうパターンの時にどうすればいいのかわからないなどあると思うので、実験しながら学ぶのが良いと思います。

cssの単位について
https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units

mdnの公式定義というのを見るとそのプロパティが何に対して有効かも確認できます。
https://developer.mozilla.org/ja/docs/Web/CSS/width#%E5%85%AC%E5%BC%8F%E5%AE%9A%E7%BE%A9