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

HTML/CSS

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

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

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

 

スポンサーリンク

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

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

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

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

CSS

.box1 { width : 200px ;  height : 100px }
.box2 { width : 50% ;  height : 100px }
ブラウザ
width : 200px
height : 100px

 

width : 50%
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 }
ブラウザ
margin-left : auto

 

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

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

CSS

.box6 {width : 200px ; margin-left : auto ; margin-right : auto }
.box7 {width : 200px ; margin : 0 auto }
ブラウザ
margin-left : 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がありますが、ほとんど使うことはなさそうです。