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 ;
}