1. 第八回ネットワーク
チーム講座資料
プロパティその4

2. 概要
• overflowプロパティ
• floatプロパティ
• z-indexプロパティ

3. overflow
コンテントボックスに内容が入りきらない場合に、はみ出た部分の
表示方法を指定する。
• visible : 初期値。ボックスからはみ出して表示される
• scroll : 入りきらない内容はスクロールして見られるようになる
• hidden : はみ出た部分は表示されない

4. overflow
overflow: visible;（初期値）

5. overflow
overflow: hidden;

6. overflow
overflow: scroll;

7. マージンの相殺の例外（復習）
親要素に対して以下のスタイルを適用すると子要素とのマージンの
相殺が起こらない。
1. border（値が0以外）
2. padding（値が0以外）
3. overflow（値がhidden または scrollの時）
4. position（値がabsolute または fixedの時）
他、floatプロパティを使用した場合も例外となる

8. float
要素の回り込みを指定する
• left : 要素を左に寄せ、右余白部に下のブロックを回り込ませる
• right : 要素を右に寄せ、左余白部に下のブロックを回り込ませる

9. clear
floatプロパティによる回り込みを解除する。
• left : 「float: left;」による回り込みを解除する
• right : 「float: right;」による回り込みを解除する
• both : 全てのfloatプロパティの回り込みを解除する

10. floatプロパティの注意点
1. floatプロパティを指定する要素には必ずwidthを指定する
2. floatプロパティを指定した要素の後にはclearプロパティを指定す
る

11. 書いてみよう
1. テキストタイプをPlainTextからHTMLに変更し、↓を展開
1. head内で→を展開
2. 「float.html」として保存
3. cssフォルダ内に「float.css」を作成し、次のスライドの通り記述

12. 書いてみよう

13. 結果

14. 書き変えてみよう

15. 結果

16. 戻しておく

17. 書き足してみよう
p.leftとp.rightの間に新たにp.leftを追加する（下記の状態でtabキー)

18. 書き足してみよう
ついでに、見やすくするためにcssの.leftセレクタに↓の通り追加

19. 結果

20. 書き足してみよう
更に、marginを追加してみる

21. 結果

22. 解説
各マージンはこの通り。
このように、floatプロパティ
で左右に並ぶ場合はマージン
の相殺は起きない。
50px
各20px
40px
20px
divの
左端

23. 書き足してみよう
この状態で.clearセレクタにmargin-topを指定すると、

24. 結果
この通り、変わらない。マージンの相殺は起こっていない。

25. 解説
clearプロパティとmargin/margin-topプロパティを一つの要素に併用
した場合、その要素の上方向へのマージンは無効となる。

26. ただし
.clearセレクタに対してさらに「float: left;」を追加すると、

27. 結果
さっきより間隔が広くなる。

28. 解説
floatプロパティが適用された要素同士
である場合、上下に隣接していても
マージンの相殺は起こらない。
つまり、.leftの下マージン50pxと
.clearの上マージン80pxの合計値、
130pxが要素同士の間隔となる。
130px
50px
80px

29. floatとmargin まとめ
1. floatプロパティで左右どちらかに寄っている要素が複数ある場合、
それらの左右マージンは相殺されない
2. floatプロパティを適用されている要素同士が上下に隣接している
場合、それらの上下マージンは相殺されない
3. clearプロパティとmargin/margin-topプロパティを同時に同じ要
素に対して適用した場合、その要素の上マージンは適用されない
※マージンが相殺されない＝それぞれの要素のマージンの合計値になるということ

30. 書き足してみよう
今更だが、親要素であるdivの境目が分かりにくいのでborderを設定

31. 結果
ボーダーがつぶれて表示されてしまう。

32. 解説
これは、floatプロパティを適用した要素は”float”という名前通り「浮
かんだ」状態になる。そのため、親要素が高さを認識できなくなり、
高さが０として扱われてしまうため。
対策として、
• floatプロパティを適用している要素の後に適用していない要素を
入れる（要するに.clear）
• 親要素に対して「overflow: hidden;」と指定する

33. 解決策
つまりは、このどちらかを実行すればよい
1. divセレクタに↓のとおり追加 2. .clearセレクタから↓を削除
※ただし、上マージンは適用されない

34. 結果

35. z-index
要素の重なりの順序を指定する。
positionプロパティでstatic以外が指定されている要素に適用される。
• 値は整数値で指定し、0を基準（背景）にして、値が大きいものほ
ど要素が重なった時に上に表示される
• 値には負の数も指定できる。

36. z-index の値の指標
“The Interactive Advertising Bureau”によれば、
• 0 - 4999: 主なコンテンツ、標準的な広告
• 5000 - 4999999: 種々の広告・ポップアップなど
• 5000000 - 5999999: ドロップダウンUI、サイト内ナビゲーションUI、固
定ヘッダや固定フッタなど (Expanding Site Navigation Elements)
• 6000000 - 6999999: 画面全体を覆う要素 (Full-page Overlays)
※広告業界における指標なので、これに必ず従わなければいけないというものではない

37. 書いてみよう
1. 「z-index.html」を作成し、↓の通り記述して展開
※”$”は連番を表す。要素を繰り返したとき、その回数分の数字に置き換わる
2. head内に→の通り記述して展開
3. cssフォルダ内に「z-index.css」を作成し次のスライドの通り記述

38. 書いてみよう

39. 結果
z-indexの値が大きい順に、上に表示される

40. 書き換えてみよう
.No1セレクタのz-indexの値を60に変更すると、このように表示され
る。

41. 書き換えてみよう
.No5セレクタのz-indexの値を25に変更すると、このように表示され
る。

42. 書き足してみよう
1. z-index.htmlのp.No5の後に↓の文を記述して展開
2. z-index.htmlに次のスライドの通り追加

43. 書き足してみよう

44. 結果
z-indexの値が大きい方が前に表示される
ので、大体こんな感じで表示される
（各要素の黒字はz-indexの値）

45. 結果
･･･はずなのだが、実際にはこのように表示される

46. スタックコンテキスト
Z軸方向（要素同士が重なる方向）の階層構造を形成するグループの
こと。
スタックコンテキストを生成するのは、以下の二つ。
1. ルート要素（html要素）
2. z-index と position（static以外）を指定した要素
スタックコンテキストの内部に新たなスタックコンテキストを含む
ことも出来る。

47. スタックコンテキスト
重要なのは、z-indexで指定した値（＝スタックレベル）は、同一ス
タックコンテキスト内でしか効果が無いということ。
つまるところ、スタックコンテキストを生成する親要素内の子要素
にz-indexを指定しても、親要素のスタックコンテキスト内でしかz-
indexの比較はされない。

48. スタックコンテキスト イメージ
html
p.No1 p.No2 p.No3 p.No4 p.No5 div.No6
p.No6-2
p.No6-1
スタックレベルを無視した場合、このように図示できる。

49. スタックコンテキスト イメージ
スタックレベルを比較できるのは同一スタックコンテキスト内の要
素同士だけ、つまりこの例においては同じ色の要素同士だけである。
p.No1
（60）
p.No2
（20）
p.No3
（30）
p.No4
（40）
p.No5
（25）
div.No6
（35）

50. つまり、htmlの作ったスタックコンテキスト内でこのように積み上
げられることになる。
p.No2
（20）
p.No5
（25）
p.No3
（30） div.No6
（35）
p.No4
（40）
スタックコンテキスト イメージ
p.No1
（60）

51. そのあとで、div.No6の生成したスタックコンテキスト内のスタック
レベルが比較される。
p.No2
（20）
p.No5
（25）
p.No3
（30） div.No6
（35）
p.No4
（40）
スタックコンテキスト イメージ
p.No1
（60）
p.No6-１（15）
p.No6-2
（55）

52. このように、親要素がスタックコンテキストを持っている場合、親
要素のスタックレベルが絶対であり、子要素にどんなスタックレベ
ルを設定しても上の階層のスタックレベルとの比較はできない。
p.No2
（20）
p.No5
（25）
p.No3
（30）
div.No6
（35）
スタックコンテキスト イメージ
p.No6-１（15）
p.No6-2
（55）
p.No4
（40）
p.No1
（60）

53. 疑問
では、右に示した通りに表示するためには
どうしたらよいのか？

54. 答え
それは、親要素（div.No6）がスタックコンテキストを生成しないよ
うにすればよい。
div.No6に対して、以下のようにスタイルを指定すればスタックコン
テキストを生成しない。
1. z-index: auto; と指定する
2. position: static; と指定する

55. 書き換えてみよう

56. 結果

57. おしまい
次回はaudio/video要素です