1. 第六回ネットワーク
チーム講座資料
ボックス、プロパティその２

2. 概要
• ボックスについて
• マージン・パディング
• ボーダーを指定するプロパティ
• 背景関連プロパティその2
• マージンの重なり

3. マージン
ボーダー
パディング
ボックスとは
要素が生成する領域のこと。
コンテントとは要素の内容を示す。
コンテント

4. 実例

5. 実例

6. 解説
マージン
（150px）
width
height
パディング（50px）
ボーダー
（5px 破線）

7. margin
上下左右のマージンを一括で指定できる。
指定した値の数に応じて、マージンは下記の通りになる。
• 1つ･･･上下左右全てのマージンが指定した値になる
• 2つ･･･1つ目が上下、2つ目が左右の値になる
• 3つ･･･1つ目が上、2つ目が左右、3つ目が下の値になる
• 4つ･･･上、右、下、左の順に対応した値になる

8. margin
下記の通り指定すると、マージンは
1. margin: 20px; → 上下左右20px
2. margin: 100px 200px; → 上下100px、左右200px
3. margin: 20px 30px 40px; → 上20px、左右30px、下400px
4. margin: 100px 10px 50px 20px; → 上100px、右10px、下50px
左20px

9. padding
上下左右のパディングを一括で指定できる。
値の指定方法は marginプロパティと同様。
※marginとpadding、どちらも数値で指定を行う
※margin-top, padding-bottom, padding-left などのプロパティを用
いて、上下左右どれかだけを指定することもできる

10. border
ボーダーに関する指定を一括で行う。
上下左右全てが指定された値になる。
border: 10px solid #ff0; }
太さ スタイル 色

11. border
borderの指定を上下左右別々に行いたい場合、
① border-top, border-bottom ･･･などのプロパティで上下左右それ
ぞれについて太さ、スタイル、色を指定する
② border-width, border-style, border-color というプロパティで太さ、
スタイル、色について上下左右に別々の値を指定する
という方法がある。

12. ①について
指定方法は borderプロパティと同様。
• border-top ･･･ 要素の上部分のボーダーを指定
• border-right ･･･ 要素の右部分のボーダーを指定
• border-bottom ･･･ 要素の下部分のボーダーを指定
• border-left ･･･ 要素の左部分のボーダーを指定

13. ②について
margin / paddingプロパティと同様に、上→右→下→左の順に値を指
定していく
• border-width ･･･ ボーダーの太さを指定する
• border-style ･･･ ボーダーのスタイルを指定する
• border-color ･･･ ボーダーの色を指定する

14. border-style で指定できる値
一覧は右図の通り。初期値は none
none と hidden は共に非表示（太さ０）で
あるが、hidden は表のセルなどボーダーが
重なりあう場合も非表示となる。

15. background-size
背景画像のサイズを指定する。
background-size: 幅 高さ; で指定、あるいは ～ contain;等属性値で指定する。
• auto: 初期値。元画像からのアスペクト比を変えずに表示
• contain: 背景領域に収まる最大サイズで表示する
• cover: 背景領域を完全に覆うサイズで表示する
• 数値で指定
• ％で指定

16. background-size

17. background-clip
背景の適用範囲の指定を行う。
• border-box: 初期値。背景をボーダーボックスに適用する
• padding-box: 背景をパディングボックスに適用する
• content-box: 背景をコンテントボックスに適用する

18. background-clip
background-clip: border-box; （初期値）

19. background-clip
background-clip: padding-box;

20. background-clip
background-clip: content-box;

21. background-origin
背景の基準位置の指定を行う。
• padding-box: 初期値。背景をパディングボックスに適用する
• border-box: 背景をボーダーボックスを基準に表示する
• content-box: 背景をコンテントボックスに適用する

22. background-origin
background-origin: padding-box; (初期値)

23. background-origin
background-origin: border-box;

24. background-origin
background-origin: content-box;

25. 書いてみよう
HTMLファイルに下記の通り記述し、Emmetで展開
（カーソルを末尾に合わせてtabキーを押そう）
lang属性の変更とlinkタグの追加を行い、「margin.html」として保存
※h1とpは適当な文字列で
埋めておいてください

26. 書いてみよう
margin.css をcssフォルダ内に作成し、下記の通り書く

27. ここで
• h1要素の下マージンは20px • p要素の上マージンは30px
∴h1とpの間隔は 20px+30px＝50px になるはず

28. しかし
実際には30pxしかない。
何故？
↓同じ長さ→

29. 実は…
上下に隣り合う要素のマージンが重なり合う場合、表示されるのは
値の大きい方のみ
今回の場合はp要素のマージン（30px）の方が大きかったため、互い
の間隔は30pxとなった。
※ただし、どちらのマージンも正の値である場合のみ

30. 結果

31. ちなみに
マージンには負の値を指定することも可能。
h1の下マージンを -40px と書き変えた場合、

32. 結果
このように表示される。
※（-40px）+ 30px = -10px

33. Css続き

34. 結果

35. ちなみに
border-collapse: collapse; が有効では
無い場合
※border-collapse プロパティはボーダーを
重ね合わせるプロパティ

36. おしまい
次回はCSSのプロパティその3です