Layout with CSS - margin

Layout with CSS - margin

91e7aee9769836f448a9f1ce91255749?s=128

Masateru YOSHIMURA

June 20, 2020
Tweet

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