CSSのmax-widthとwidthの違いを理解できるようにする

CSSのmax-widthとwidthの違いを理解できるようにする

個人的にwidthとmax-widthの違いが全く理解できなかったので記事にすれば少しは理解できるかと思い、要素にwidthとmax-widthを指定して試してみました。

もしポンコツな内容があったらすいません。

 

cssのmax-widthとwidthを指定する違い

 

はじめに基本的なmax-widthとwidthの違いを理解するようにしてから、基本的なことと共にmax-widthとwidthの違いには何があるのか理解を深めていこうと思います。

 

max-widthは最大幅の指定

 

cssのmax-widthは要素の最大幅の指定をするプロパティです。

htmlでマークアップした要素の幅をmax-widthプロパティと値を指定することで「要素の幅は指定した値の最大幅以上には広がらない」でブラウザに表示することができます。

たとえばwidthの値を600pxで指定したとしてもmax-widthで最大幅を300pxに指定すれば、widthの指定幅とは違いmax-widthの300pxが最大幅としてブラウザに表示できます。

max-widthは要素の最大幅を指定するということがwidthとの違いになります。

 

widthは幅を指定

 

widthは最大幅を指定するmax-widthとは違ってwidthの値で指定した幅のサイズがブラウザに表示できます。

要素にcssのwidthプロパティで指定する値の幅によって要素の幅は違いますが、それでもwidthプロパティを指定する要素にmax-widthを同時に使用するとwidthの指定幅ではなく、max-widthの幅が適用されます。

「max-widthはwidthを上書きするのだと思います。」

widthは要素の幅を値で指定した幅のサイズにすることができるというのがmax-widthとの違いです。

 

Advertisement

 

max-widthとwidthの値で変化する違い

 

cssのmax-widthとwidthで要素の幅を指定するときにはwidthもmax-widthも値をpxや%などを使用して幅や最大幅を適用することが多いです。

このときpxや%の組み合わせ次第では、要素の幅に変化があったりしてwidthとmax-widthの違いがさらに理解できるかもと思いました。

 

max-widthにpxでwidthに%

 

要素の最大幅はpxにして幅は%にした場合の値の組み合わせを考えてみようと思います。

 

max-width: 500px;
width: 100%;

 

上記コードのwidth100%はmax-widthの指定がない場合には、メインコンテンツの幅で指定した980pxの幅になるようにしています。

しかしmax-widthで、この要素の最大幅は500px指定しているのでwidthの指定する幅は500pxの幅以上にはならないです。そして%なので画面を狭くしても縮小してくれます。レスポンシブにするときに使うことが多いかと思います。

 

ではwidthをpxでmax-widthを%にすると

 

max-widthとwidthの値を逆にした場合です。要素の幅はpxで、最大幅は%の値で指定する要素にするパターンで何か違いがあるのかな。

 

max-width: 100%;
width: 980px;

 

widthで要素の幅は980pxに。そしてwidth980pxで指定した要素の最大幅をmax-width100%にしてみました。

個人的には、先のwidth100%とmax-width980pxのとき要素幅が100%だから縮小したので、width980pxの要素は980px幅を保った幅になり違いが現れるのかと思っていました。

ですがwidth100%でmax-width980pxでcssを記述した場合と同じ結果になったので、max-widthとwidthの値を入れ替えた変化の違いが理解できなくなったのです

 

Advertisement

 

max-widthとwidthの違いを理解して分かること

 

ここまでのことで難しく思えたのは以下の2パターンです。

 

  • widthの値を%、max-widthの値をpxの要素
  • widthの値をpx、max-widthの値を%の要素

 

max-widthとwidthの違いが知りたいのに同じ結果なので、ただcssの書き方の違いだけなのかもと理解するようにしました。

他にmax-widthとwidthの違いの理解のヒントになりそうなことは「max-widthはwidthを上書きする」ということと、親要素はmax-widthかwidthなのか、その親要素の値にはpxか%指定なのか。というのでも違いが出るのかと思います。

max-widthとwidthの違いをもっと深く理解しておきたかったのですが、結果的に使用するときはwidthを%でmax-widthはpxにするパターンが使いやすいのかな。という違いが分かりました。

 

まとめ

 

widthは要素の幅の指定ができるcssのプロパティでmax-widthはwidthで指定した幅の最大幅の指定をするという違い。

そして2パターンで値を逆にしても伸縮できる要素になるので、その違いを理解したかったけど、

 

widthにpx、max-widthに%は使いづらく思える。
widthに%、max-widthにpxは理解しやすく使いやすい。

 

という理解するための違いが理解できました。

いつまでも「なぜだ?」と違いを考えていても先に進まないのでmax-widthとwidthの違いで理解できた「widthに%、max-widthにpx」の使いやすいcssの記述方法を使いながら勉強しておこうと思います。

CSSカテゴリの最新記事