CSSのボックスモデルについて

CSSのボックスモデルについて

 ボックスモデルとはCSSでのサイトデザインの大本となる考え方です。各要素がボックスという四角形の領域を持ちその積み重ねでWebページを構成します。各ボックスは各々、
 高さ:height
 幅:width
 外側の余白:margin
 境界線:border
 内側の余白:padding
のプロパティを持ちます。



height/width

 ボックスの高さ、幅を指定します。外側の余白、境界線、内側の余白の高さ、幅は含まれませんので注意して下さい。

 これを含むようにしたい場合は以下で説明するbox-sizingプロパティを指定する必要があります。


height/width値 説明
※サイズ px、%、em等により設定する

height/widthプロパティ利用例

CSS

.sample1 {
 width: 200px;
 height: 100px;
}



box-sizing

 ボックスモデルにおいて、ボックスの高さ、幅を指定する際に。外側の余白、境界線、内側の余白の高さ、幅を含むか含まないかを指定します。


box-sizing値 説明
content-box(初期値) 高さ、幅を指定する際に。外側の余白、境界線、内側の余白の高さ、幅を含まない
border-box 高さ、幅を指定する際に。外側の余白、境界線、内側の余白の高さ、幅を含む

box-sizingプロパティ利用例

CSS

.sample2 {
 box-sizing:border-box;
 width:100px;
 margin-left:5px;
 margin-right:5px;
}

  この例ではwidth:100pxのサイズを指定していますが、実際のwidthは100px-5px-5px=90pxということになります。



max-height/max-width 及び min-height/min-width

 レスポンシブデザインにおいて、これ以上の高さ、幅にしたくない、これ以下の高さ、幅にしたくない。という場合に設定します。利用方法はheight/widthと同じです。box-sizingの適用も同じです。





border

 ボックスの境界線を指定するプロパティです。色、線種、太さを各々指定できます。


 ~ 色:border-color ~ 

border-color値 説明
※色 境界線の色をキーワード(ex.red)、16進数、RGBA等により設定する

 ~ 線種:border-style ~ 

border-style値 説明
none(初期値) 境界線を表示しない
solid 1本の実線が表示される
double 2本の実線が表示される
dotted 1本の点線が表示される
dashed 1本の破線が表示される
groove 凹立体線が表示される
ridge 凸立体線が表示される
inset 凹ボタンのような線が表示される
outset 凸ボタンのような線が表示される

 ~ 太さ:border-width ~ 

border-width値 説明
※サイズ px、%、em等により設定する

borderプロパティ利用例

CSS

.sample3_1 {
 border: white solid 1px; /* 色・線種・太さ */
}

  色・線種・太さの順番については決まりはなく、どれから指定しても問題ありません。

  以下のようにサブプロパティで指定しても同じ結果になります。

.sample3_2 {
 border-color:white;
 border-style:solid;
 border-width:1px;
}



border-top/border-bottom/border-left/border-right

 上記borderプロパティは四辺を一括指定しますが、border-top/border-bottom/border-left/border-rightプロパティを利用することで各辺ごと別々の指定をすることが出来ます。


border-top/border-bottom/border-left/border-right値 説明
※色・線種・太さ
(順番は任意でOK)
各々の設定方法は上記のborderと同じです。

border-top/border-bottom/border-left/border-rightプロパティ利用例

CSS

.sample4 {
 border-top: red solid 1px ;
 border-bottom: blue double 2px ;
 border-left: yellow dotted 3px ;
 border-right: black dashed 4px ;
}



border-radius

 境界線の角を丸めるプロパティです。このプロパティはCSS3から追加されたプロパティであり、既存のborderプロパティの中で指定することはできず、サブプロパティであるborder-radiusでのみ指定可能です。


border-radius値 説明
※サイズ px、%、em等により設定する

border-radiusプロパティ利用例

CSS

.sample5 {
 border-radius: 5px ;
}




margin/padding

 ボックスの余白を指定するプロパティです。marginは外側の余白。paddingは内側の余白です。


margin/padding 説明
上 右 下 左
※サイズ
上下左右の余白をpx、%、em等により設定する

margin/paddingプロパティ利用例

CSS

.sample6_1 {
 margin: 5px ; /* 外側の余白 */
 padding: 10px ; /* 内側の余白 */
}

  上記の場合は外側の余白、内側の余白の四辺を一括で指定していますが、以下の例のように各辺を個別に指定することができます。

.sample6_2 {
 margin: 5px 10px 5px 20px ; /* 上→右→下→左の時計回りで指定 */
 padding: 10px 0 20px 30px ; /* 上→右→下→左の時計回りで指定 */
}

  左右及び上下の余白が一致する場合は省略して書くことができます。

.sample6_3 {
 margin: 5px 10px ; /* margin: 5px 10px 5px 10px ; と同意 */
 padding: 10px 0 ; /* padding: 10px 0 10px 0 ; と同意 */
}


  サブプロパティを利用することもできます。

.sample6_4 {
 margin-top:5px; /* margin: 5px 10px 5px 10px ; と同意 */
 margin-right:10px ;
 margin-bottom:5px ;
 margin-left:10px ;

 padding-top: 10px ; /* padding: 10px 0 10px 0 ; と同意 */
 padding-bottom: 10px ;
}




 Copyright IT SKILL MAP. All rights reserved.