Layout with CSS - margin

Transcript

1. $44ʹΑΔ༨നͷௐ੔
2. ϨΠΞ΢τʹ͓͍ͯ༨ന͸௒ॏཁ w஫໨ͯ͠΄͍͠ͱ͜Ζʹ༠ಋͰ͖Δɻ
   wը໘શମ͕ݟ΍͘͢ͳΓɺจষ͕ಡΈ΍͘͢ͳΔɻ
3. Έͳ͞Μ΁࿈བྷͰ͢ 
   খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ 
   ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ Έͳ͞Μ΁࿈བྷͰ͢ 
   খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ 
   ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ ͲͪΒ͕ಡΈ΍͍͢Ͱ͔͢ʁ
4. Έͳ͞Μ΁࿈བྷͰ͢ 
   খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ 
   ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ Έͳ͞Μ΁࿈བྷͰ͢ 
   খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ 
   ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ ύϫϙͰ΍Γ͕ͪͳ
   ٧ΊࠐΈϨΠΞ΢τ ·ͣɺݟग़͠ʹ໨͕ߦ͖ɺ
   ݟग़͠ΛಡΜͰ͔Β
   ຊจΛಡΉͱ͍͏͜ͱ͕
   ࣗવͱͰ͖Δɻ
5. ֤)5.-ʹରͯ͠ɺNBSHJOʢ֎ଆͷ༨നʣΛઃఆ͢Δ h1 { margin-top: 48px; margin-bottom: 48px; } ༨നͷ෇͚ํ Έͳ͞Μ΁࿈བྷͰ͢ 
   খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ 
   ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ h1 h2 h2 p p h2 { margin-top: 36px; margin-bottom: 16px; } p { margin-top: 16px; margin-bottom: 16px; } mt48 tab mb48 tab ˞্Լ͸௕͍ํͷ༨ന͕༏ઌ͞ΕΔ
6. ฒ΂Δࡍʹ΋NBSHJOΛ࢖͏͜ͱ͕ଟ͍ ༨നͷ෇͚ํ .item ˞ࠨӈͷ༨ന͸ɺ૒ํద༻͞ΕΔ .item .item .item .item .item
7. ల։લ ల։ޙ ࢖༻ྫ Ұํ޲ʹઃఆ 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 ϏσΦΛݟͳ͕Β$PEF1FOͰ΍ͬͯΈΑ͏ʂ ্ͷ༨നΛQY
   ӈͷ༨നΛQY
   Լͷ༨നΛQY
   ࠨͷ༨നΛQY