第06回Web講座

overflow, position , ボックスプロパティ

Transcript

1. 第６回 Web講座 created by mathuura editor kagawa
2. 概要 ボックスについて overflowプロパティ margin/padding/border marginの相殺 positionプロパティ 2
3. マージン ボーダー パディング ボックスとは 要素が生成する領域のこと。 コンテントとは要素の内容を示す。 コンテント 3
4. ボックスサイズの確認方法 ボックスサイズについては、ブラウザ付属のディベロッパーツールで、 インスペクタという機能を使用すると確認することができる。 1. ブラウザ上でF12キーを押すと、次のページのような画面になる （例はクロームの場合） 4
5. ボックスサイズの確認方法 5
6. ボックスサイズの確認方法 2. 左上の方にマウスカーソルを模したボタンがあるのでそれをクリック 6
7. ボックスサイズの確認方法 3. 確認したい要素をクリックする 7
8. ボックスサイズの確認方法 4. ディベロッパーツールの右側にある”Styles”というタブの一番下でボッ クスサイズが確認できる 8
9. overflow コンテントボックスに内容が入りきらない場合に、はみ出た部分の 表示方法を指定する。 visible : 初期値。ボックスからはみ出して表示される scroll : 入りきらない内容はスクロールして見られるようになる hidden : はみ出た部分は表示されない 9
10. overflow overflow: visible;（初期値） 10
11. overflow overflow: hidden; 11
12. overflow overflow: scroll; 12
13. 実例  新しいhtml  !>p [tab キー] 13
14. 実例 14
15. マージン （150px） width height パディング（50px） ボーダー （5px 破線） 15 解説
16. margin 要素同士の間隔・余白を一括で指定するプロパティ。 指定した値の数に応じて、マージンは下記の通りになる。  1つ･･･上下左右全てのマージンが指定した値になる  2つ･･･1つ目が上下、2つ目が左右の値になる  3つ･･･1つ目が上、2つ目が左右、3つ目が下の値になる  4つ･･･上、右、下、左の順に対応した値になる 16
17. margin 下記の通り指定すると、マージンは 1. margin: 20px; → 上下左右20px 2. margin: 0 200px; → 上下0px、左右200px 3. margin: 20px 30px 40px; → 上20px、左右30px、下400px 4. margin: 100px 10px 50px 20px; →上100px、右10px、下50px 左20px 17 ↑ ←→ ↓ 時計回り ↑→ ↓ ← ↑ ↓ ←→
18. padding 要素内の空白（ボーダーとコンテントとの間隔）を指定する。 値の指定方法は marginプロパティと同様。 padding: 0 30px; 18
19. border ボーダーに関する指定を一括で行う。 上下左右全てが指定された値になる。 border: 10px solid #ff0; 太さ スタイル 色 19
20. border borderの指定を上下左右別々に行いたい場合、2つの方法がある。 ① border-top, border-bottom, border-left, border-right を用いる border-topは上のみ、border-bottomは下のみ…という風に、対応した プロパティを用いて個別に設定する方法。 値の指定方法はborderと同様。 border-top: 3px double #909090; 太さ スタイル 色 20
21. border 2. border-width, border-style, border-color で太さ、スタイル、色につい て上下左右に別々の値を指定する -width 太さ ｜ -style スタイル ｜-color 色を指定する。 指定する際の順番はmargin/paddingと同様で、指定した値の数に応じ て上下左右に設定される。 21
22. border-style で指定できる値 一覧は右図の通り。初期値は none none と hidden は共に非表示（太さ０）で あるが、hidden は表のセルなどボーダーが 重なりあう場合も非表示となる。 22
23. 結果 23
24. ちなみに border-collapse: collapse; が有効では 無い場合 ※border-collapse プロパティはボーダーを 重ね合わせるプロパティ 24
25. background-clip 背景の適用範囲の指定を行う。  border-box : 初期値。背景をボーダーボックスに適用する  padding-box: 背景をパディングボックスに適用する  content-box : 背景をコンテントボックスに適用する 25
26. background-clip background-clip: border-box; （初期値） 26
27. background-clip background-clip: padding-box; 27
28. background-clip background-clip: content-box; 28
29. background-origin 背景の基準位置の指定を行う。  padding-box: 初期値。背景をパディングボックスに適用する  border-box : 背景をボーダーボックスを基準に表示する  content-box : 背景をコンテントボックスに適用する 29
30. background-origin background-origin: padding-box; (初期値) 30
31. background-origin background-origin: border-box; 31
32. background-origin background-origin: content-box; 32
33. 書いてみよう 以下のようなHTML文書を記述する。 （なるべくEmmetを用いて記述してみよう） 33
34. 書いてみよう margin.css をcssフォルダ内に作成し、下記の通り書く 34
35. ここで h1要素の下マージンは20px ＋ p要素の上マージンは30px ∴h1とpの間隔は 20px+30px＝50px になるはず 35
36. しかし 実際には30pxしかない。 何故？ ↓同じ長さ→ 36
37. マージンの相殺 上下に二つのマージンが重なり合う場合、  符号が同じ場合、値が大きい方が優先される。 30px > 20px ... 30px  符号が異なる場合、合算値になる。 30 – (-20) = 50 px このような状態を マージンの相殺という 37
38. 結果 38
39. ちなみに マージンには負の値を指定することも可能。 h1の下マージンを -40px と書き変えた場合、 39
40. 結果 このように表示される。 ※（-40px）+ 30px = -10px 40
41. 演習：マージンの相殺について 41
42. 考える divの中にp要素があり、p要素の上マージンは50pxなので、 下の通り表示される･･･？ 50px 42
43. 結果 実はマージンの相殺は親子要素同士でも起こる。 今回の場合、  h1の下マージン30px  divの上マージン20px  pの上マージン50px この3つが重なり、一番大きい50pxになる 50px 43
44. Div に追加 44 div要素に対して、 次の通りスタイルを追加する。
45. ボックスサイズ ボックスサイズ＝マージン+ボーダー+パディング+コンテントであり、  高さ＝上下マージン+上下ボーダー+上下パディング+height  幅＝左右マージン+左右ボーダー+左右パディング+width で求められる 45
46. ボックスサイズの計算 今回の場合、div要素のボックスサイズは  高さ＝20px+2px*2+20px+100px=144px  幅＝0px+2px*2+10px*2+300px=324px ←このように表示されるはず 50px 324px 144px 46
47. 結果 実際にはこうなる。 何故？ 47
48. マージンの相殺の例外 実は、親要素に対して以下のスタイルを適用すると子要素との マージンの相殺が起こらない。 1. border（値が0以外） 2. padding（値が0以外） 3. overflow（値がhidden または scrollの時） 4. position（値がabsolute または fixedの時） 他、floatプロパティを使用した場合も例外となる（次回解説） 48
49. 解説 h1-div間のマージンは、p要素の下マージン が適用されて30pxとなる。 div内のp要素のマージンは相殺されないので、 ボーダーから50px下にp要素が表示される。 ボックスサイズは先ほど求めた通り。 49
50. box-sizing width , height プロパティで指定するボックスサイズの大きさの算出方 法を変更する際に使用する。  content-box : 初期値。パディング、ボーダーを幅と高さに含めない  padding-box : パディングを幅と高さに含める（ボーダーは除く）  border-box : パディングとボーダーを幅と高さに含める 50
51. マージン ボーダー パディング つまり 1. content-boxの場合 コンテント マージン ボーダー+パディング +コンテント width height width height 2. border-boxの場合 51
52. つまり box-sizing: border-box; と指定した場合、ボックスサイズの計算は  高さ＝上下マージン+height  幅＝左右マージン+width これだけで良い。 52
53. position ボックスの配置方法を指定する。  static : 初期値。top などの位置指定プロパティが適用されない。  relative : 相対位置に配置する。  absolute : 絶対位置に配置する。  fixed : 絶対位置に配置し、なおかつスクロールしても動かない。 53
54. position 値にstatic以外を指定した場合、以下のプロパティを併用して位置を指定する。  top : 上方向に対する基準位置からの距離  bottom : 下方向に対する基準位置からの距離  left : 左方向に対する基準位置からの距離  right : 右方向に対する基準位置からの距離 54
55. position : relative; 30px 値がstaticである時の位置を基準位置とする。 適用 30px(top) 30px(margin) 30px(left) 55
56. position : absolute; 30px 上位階層の要素で直近のposition: static; でない要素を基準位置 とする。 適用 30px(top) 20px(margin) 30px(left) 56
57. position: fixed; 最初の表示位置はabsoluteと同様だが、画面上に固定される。 （スクロールしても位置が変わらない） 57
58. おしまい 次回は続けてCSSのプロパティです 58