【CSS】ボックスの右寄せ・中央寄せ、max-width、min-width

タイトルの通り、単純にボックスの大きさを変えたり、

右寄せ、中央寄せにしたり、

画面のサイズによってボックスの大きさを変えたりをします。

ボックスの大きさを指定する

widthプロパティで 幅を、 heightプロパティで 要素内容の高さを指定できます。

値は「px」で大きさを直接指定するか、「%」で親要素に対する割合で指定することができます。

「%」で指定すると ブラウザの大きさが変わってもその割合で表示されます。

.box1 { width : 200px ;  height : 100px }
.box2 { width : 50% ;  height : 100px }

100%と autoの違い

大きさの値を「auto」で指定する方法もあります。

これは「大きさを自動設定する」値になります。

例えば「width ： auto」とすると幅いっぱいに広がりますが、「width : 100%」でも同じだと思いませんか？

実際に見てみましょう。

.box3 { width : 100% ; padding : 30px }
.box4 { width : auto ; padding : 30px }

widthや heightは要素内容の大きさを指定します。その大きさにパディング、ボーダー、マージンの分は 含まれません。

そのため、パディング、ボーダー、マージンに大きさを持たせて「width : 100%」とするとその分だけ はみ出ることになってしまいます。（実際は横スクロールバーが出ます）

これを「width : auto」にすると パディング、ボーダー、マージンを含めて納めてくれます。

ボックスの右寄せ、中央寄せ

ボックスを右に寄せるには左側のマージンを「auto」にします。

.box5 {width : 200px ; margin-left : auto }

ボックスを中央に寄せるには左右 両側のマージンを「auto」にします。

下の 2つはどっちでも同じです。

.box6 {width : 200px ; margin-left : auto ; margin-right : auto }
.box7 {width : 200px ; margin : 0 auto }

ちなみに、中のテキストを中央寄せする場合は「text-align : center」ですね。

ボックス幅の上限、下限

幅は max-widthプロパティで最大幅を、min-widthプロパティを使って最小幅を 指定することができます。

どちらもレスポンシブデザイン（PCでもスマホでもちょうどいい大きさで見れる）では必須のプロパティです。

max-width

max-widthプロパティは、例えば スマホのような画面の幅が小さいときは 幅100%で、PCで幅1000px 確保できるような場合でも 最大幅は 600px という指定ができます。

.box7 {width : 100% ; height : 100px ; max-width : 600px }

min-width

min-widthプロパティは、例えばPCで50%の大きさだとちょうどよくても、スマホ画面の50%では小さすぎてしまうような場合、最小サイズを指定することで小さくなりすぎることを防ぎます。

.box8 {width : 50% ; height : 100px ; min-width : 300px }

max-heightと min-height

height に対しても max-heightと min-heightがありますが、ほとんど使うことはなさそうです。