タイトルの通り、単純にボックスの大きさを変えたり、
右寄せ、中央寄せにしたり、
画面のサイズによってボックスの大きさを変えたりをします。
ボックスの大きさを指定する
widthプロパティで 幅を、 heightプロパティで 要素内容の高さを指定できます。
値は「px」で大きさを直接指定するか、「%」で親要素に対する割合で指定することができます。
「%」で指定すると ブラウザの大きさが変わってもその割合で表示されます。
CSS
.box1 { width : 200px ; height : 100px } .box2 { width : 50% ; height : 100px }
height : 100px
height : 100px
100%と autoの違い
大きさの値を「auto」で指定する方法もあります。
これは「大きさを自動設定する」値になります。
例えば「width : auto」とすると幅いっぱいに広がりますが、「width : 100%」でも同じだと思いませんか?
実際に見てみましょう。
CSS
.box3 { width : 100% ; padding : 30px } .box4 { width : auto ; padding : 30px }
widthや heightは要素内容の大きさを指定します。その大きさにパディング、ボーダー、マージンの分は 含まれません。
そのため、パディング、ボーダー、マージンに大きさを持たせて「width : 100%」とするとその分だけ はみ出ることになってしまいます。(実際は横スクロールバーが出ます)
これを「width : auto」にすると パディング、ボーダー、マージンを含めて納めてくれます。
ボックスの右寄せ、中央寄せ
ボックスを右に寄せるには左側のマージンを「auto」にします。
CSS
.box5 {width : 200px ; margin-left : auto }
ボックスを中央に寄せるには左右 両側のマージンを「auto」にします。
下の 2つはどっちでも同じです。
CSS
.box6 {width : 200px ; margin-left : auto ; margin-right : auto } .box7 {width : 200px ; margin : 0 auto }
margin-right : auto
または
margin : 0 auto
ちなみに、中のテキストを中央寄せする場合は「text-align : center」ですね。
ボックス幅の上限、下限
幅は max-widthプロパティで最大幅を、min-widthプロパティを使って最小幅を 指定することができます。
どちらもレスポンシブデザイン(PCでもスマホでもちょうどいい大きさで見れる)では必須のプロパティです。
max-width
max-widthプロパティは、例えば スマホのような画面の幅が小さいときは 幅100%で、PCで幅1000px 確保できるような場合でも 最大幅は 600px という指定ができます。
CSS
.box7 {width : 100% ; height : 100px ; max-width : 600px }
min-width
min-widthプロパティは、例えばPCで50%の大きさだとちょうどよくても、スマホ画面の50%では小さすぎてしまうような場合、最小サイズを指定することで小さくなりすぎることを防ぎます。
CSS
.box8 {width : 50% ; height : 100px ; min-width : 300px }
max-heightと min-height
height に対しても max-heightと min-heightがありますが、ほとんど使うことはなさそうです。