今回は、サイトの横幅を統一し、ブロック要素を常に中央に配置する方法をご紹介します。
サイトの横幅を統一し、ブロック要素を中央に配置する方法[widthとmargin]
まずは、以下の使用例をご覧ください。
See the Pen KKzBwwo by ryu (@ryu-no-sss) on CodePen.
デモを見ていただくと、各ブロックが、サイトの中央に配置され、
なおかつ、全体の横幅は、『width:300px;』で統一されています。
これは、cssの最初に記載している
『.inner』に、widthとmargin: 0 auto;によって、
全体の横幅と、ブロックを中央配置するように設定しているからです。
ですので、主要なブロックに、innerクラスを追加することで、
各ブロックに、同一のcssが適用され、レイアウトを統一できるというというわけです。
このように、あらかじめサイト全体の横幅を指定したclassを用意し、
各ブロックに使用することで、cssのコード量も減り、
なおかつ、サイト全体の横幅を変更したい時も、
class内（デモ内でいう.inner）のwidthの値だけを変更すれば良いため、
変更も楽に出来ます。
※margin: 0 auto;とは
margin: 0 auto;って何？と思った方は、
以下のリンクの記事に詳しく記載しているため、ぜひ！
※なぜwidthとmax-widthを同じクラスに設定するの？
なぜwidthとmax-widthを同じクラスに設定するの？と思った方は、
以下のリンクの記事で説明しているため、ぜひ！
まとめ
・1つのクラスに、サイト全体の横幅を記載しておく。
今回は、サイトの横幅を統一し、ブロック要素を中央に配置する方法[widthとmargin]について解説しました。
他にも、実戦でよく使うCSSコード（テキスト要素）を以下のリンクの記事にまとめているので、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
タグ
