Box Model : margin, border, padding

Transcript

1. ઢͱ಺ଆͷ༨ന
2. ίϯςϯπͱ༨നͱઢ ίϯςϯπʢจࣈ΍ը૾ʣʹରͯ͠
   w֎ଆͷ༨ന
   wઢ
   w಺ଆͷ༨ന
   ͕ઃఆͰ͖Δɻ
   ͜ΕΒΛ༻͍Δ͜ͱͰ
   ΑΓݟ΍͍͢ϨΠΞ΢τ͕Ͱ͖Δɻ margin border padding margin padding border
3. Έͳ͞Μ΁࿈བྷͰ͢ খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ ΑΓಡΈ΍͘͢ Έͳ͞Μ΁࿈བྷͰ͢ খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ Έͳ͞Μ΁࿈བྷͰ͢ খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ
4. Έͳ͞Μ΁࿈བྷͰ͢ খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ border-bottom border-left
5. ల։લ ల։ޙ ࢖༻ྫ Ұํ޲ʹઃఆ mt mr mb ml margin-top margin-right margin-bottom margin-left mt48 → margin-top : 48px; mr48 → margin-right : 48px; mb48 → margin-bottom : 48px; ml48 → margin-left : 48px; ·ͱΊͯઃఆ m margin m0 → margin : 0; m20-10 → margin : 20px 10px; m20-0-10 → margin : 20px 0 10px; m20-0-10-5 → margin : 20px 0 10px 5px; ୯Ґ͸QYͷ΄͔ʹFN΍΍ͳͲ͕ࢦఆͰ͖Δɻ NBSHJOͷઃఆํ๏͍Ζ͍Ζ ֎ଆͷ༨നͷ෇͚ํ ্Լࠨӈͷ༨നΛɺ͸୯ҐΛলུͰ͖Δ ্ԼQYɺࠨӈQY ্QYɺࠨӈɺԼQY ্QYɺࠨɺԼQYɺӈQY ্ͷ༨നΛQY
   ӈͷ༨നΛQY
   Լͷ༨നΛQY
   ࠨͷ༨നΛQY
6. ల։લ ల։ޙ ࢖༻ྫ Ұํ޲ʹઃఆ pt pr pb pl padding-top padding-right padding-bottom padding-left pt48 → padding-top : 48px; pr48 → padding-right : 48px; pb48 → padding-bottom : 48px; pl48 → padding-left : 48px; ·ͱΊͯઃఆ p padding p0 → padding : 0; p20-10 → padding : 20px 10px; p20-0-10 → padding : 20px 0 10px; p20-0-10-5 → padding : 20px 0 10px 5px; ୯Ґ͸QYͷ΄͔ʹFN΍΍ͳͲ͕ࢦఆͰ͖Δɻ QBEEJOHͷઃఆํ๏͍Ζ͍Ζʢߟ͑ํ͸NBSHJOͱಉ͡ʣ ಺ଆͷ༨നͷ෇͚ํ ্Լࠨӈͷ༨നΛɺ͸୯ҐΛলུͰ͖Δ ্ԼQYɺࠨӈQY ্QYɺࠨӈɺԼQY ্QYɺࠨɺԼQYɺӈQY ্ͷ༨നΛQY
   ӈͷ༨നΛQY
   Լͷ༨നΛQY
   ࠨͷ༨നΛQY
7. ల։લ ల։ޙ ࢖༻ྫɺ༻్ Ұํ޲ʹઃఆ bt br bb bl border-top: 1px ; border-right: 1px ; border-bottom: 1px ; border-left: 1px ; bl5-s-#0 border-left: 5px solid #000; bb1 border-bottom: 1px dashed #000; ·ͱΊͯઃఆ bd border: 1px ; border: 1px solid #000; CPSEFSͷઃఆํ๏͍Ζ͍Ζ ઢͷ෇͚ํ ΄͔ʹ΋ ݟग़͠ͷ૷০ͱͯ͠ ଠ͞ छྨ ৭ dashed dotted double ݟग़͠ͷ૷০΍ίϯςϯπͷ۠੾Γઢͱͯ͠ ஋Λมߋ͍ͯ͠Ζ͍Ζࢼͯ͠ΈΑ͏ɻ ͳͲ