ボックスモデルの考え方
HTMLで余白やレイアウトを設定するには，CSSのボックスモデルという概念を理解すると良い．HTMLの全ての要素は，以下の4種類の領域を持ち，この４つを合わせた領域のことをボックスという．
１．内容領域：コンテンツ(Content)
ブラウザに表示される要素内のテキストや画像を含む領域．
２．内側余白領域：パディング(Padding)
内容領域の外側にある「余白」の領域．
３．境界線領域：ボーダー(Border)
パディング領域の外側で，パティング領域とマージン領域の「境界線」となる領域．
４．外側余白領域：マージン(Margin)
ボーダーより外側にある「余白」の領域．隣り合った要素との間の設定に使う．
パディングの指定方法
/*例*/
selector{
padding: 10px 20px 20px 40px;
}
要素には，上下左右の４つの余白を持つため，1つずつ指定する方法と複数指定する方法がある．
| 記述方法 | 指定される方向 |
|---|---|
padding: (値); |
上下左右の４つ全てに同じ指定をする |
padding: (値) (値); |
上下と左右のセットで同じ指定をする |
padding-top: (値); |
上のパディングを指定する |
padding-bottom: (値); |
下のパディングを指定する |
padding-left: (値); |
左のパディングを指定する |
padding-right: (値); |
右のパディングを指定する |
padding: (値) (値) (値) (値); |
上下左右にそれぞれ指定をする |
マージンの指定方法
/*例*/
selector{
margin: 10px 20px 20px 40px;
}
marginも同様で，上下左右の４つの余白に対して，1つずつ指定する方法と複数指定する方法がある．
| 記述方法 | 指定される方向 |
|---|---|
margin: (値); |
上下左右の４つ全てに同じ指定をする |
margin: (値) (値); |
上下と左右のセットで同じ指定をする |
margin-top: (値); |
上のマージンを指定する |
margin-bottom: (値); |
下のマージンを指定する |
margin-left: (値); |
左のマージンを指定する |
margin-right: (値); |
右のマージンを指定する |
margin: (値) (値) (値) (値); |
上下左右にそれぞれ指定する |
ボーダーの指定方法
ボーダーに関しては，線の太さ・色・スタイルの３つを指定することができる．このボーダーに関しても，1つずつ指定する方法と複数指定する方法がある．
| 記述方法 | 指定される方向 |
|---|---|
border-〇〇: (値); |
上下左右の４つ全てに同じ指定をする |
border-〇〇: (値) (値); |
上下と左右のセットで同じを指定する |
border-top-〇〇: (値); |
上のボーダーを指定する |
border-bottom-〇〇: (値); |
下のボーダーを指定する |
border-left-〇〇: (値); |
左のボーダーを指定する |
border-right-〇〇: (値); |
右のボーダーを指定する |
border-〇〇: (値) (値) (値) (値); |
上下左右にそれぞれ指定する |
上記の〇〇に何を入れるかで，線の太さ・色・スタイルのどれかを指定することができる．
１．width
線の太さを指定することができる．
selector{
border-width: 5px 10px 15px 20px;
}
↓結果
２．color
線の色を指定することができる．
selector{
border-color: red blue green yellow;
}
↓結果
３．style
枠線のスタイルを指定することができる．スタイルには以下のような種類がある．
・none：枠線なし
・solid：実践
・double：二重線
・dotted：点線
指定しないとデフォルトで枠線なしが指定されるので注意．他にもさまざまな種類のstyleがある．
selector{
border-style: solid dotted dashed double;
}
↓結果
４．〇〇に何も入れない
〇〇に何も入れない場合は，線の太さ・色・スタイルを同時に指定することができる．指定する順番は，線の太さ→スタイル→色という順番になる．
selector{
border: 5px double red;
}
↓結果
