今回は、私も学習当初に疑問に思っていたことである
widthとmax-widthをなぜ同じclass内に記載するのか？
という点について解説させていただきます。
widthとmax-widthを同じclass内に記載する理由
まず、結論から言いますと、
div {
width: 100%;
max-width: 1200px;
}
という記述をします。
max-widthに関しては、ブロック要素の横幅が、
1200px以上にならないようにという設定です。
もし、ブラウザの幅（画面の大きさ）が1200px以下の場合は、
widthで設定した100%によって、
画面幅いっぱいにブロック要素を配置します。
以下、使用例になります。
See the Pen LYNBGqR by ryu (@ryu-no-sss) on CodePen.
実践でwidthとmax-widthを同じclassにいれる場面として、
サイトの横幅を統一し、ブロック要素を中央に配置する場合によく使います。
以下のリンクの記事で、サイトの横幅を統一し、ブロック要素を中央に配置する方法を説明していますので、こちらの記事もぜひ！
まとめ
・widthに100%、max-widthに横幅の最大値をいれる。
今回紹介したテクニックは、よく使うので、
しっかり使いながらマスターしていきましょう！
他にも、実戦でよく使うCSSコード（テキスト要素）を以下のリンクの記事にまとめているので、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
タグ
