div要素の正しい使い方

2017年11月17日の「まぼろしのマークアップ勉強会 #1」でお話したスライドです
#mbrs_markup_study

Transcript

1. EJWཁૉͷਖ਼͍͠࢖͍ํ ·΅Ζ͠ͷϚʔΫΞοϓษڧձ
   
 !ZVLPTOPPQZ
2. EJWཁૉΛ
   ࢖͍ͬͯ·͔͢
3. ΋ͪΖΜ
4. EJWཁૉΛਖ਼͘͠
   ࢖͍ͬͯ·͔͢
5. /PUF
   ଞͷཁૉ͕ద੾Ͱͳ͍৔߹ɺஶऀ͸࠷ޙͷखஈͷཁૉͱͯ͠EJWཁૉΛݕ౼͢Δ͜ ͱΛڧ͘ਪ঑͢ΔɻEJWཁૉͷ୅ΘΓʹΑΓద੾ͳཁૉΛ࢖༻͢Δ͜ͱ͸ɺಡऀʹ ରͯ͠ΑΓྑ͍ΞΫηγϏϦςΟʔͱஶऀʹର͢ΔΑΓ༰қͳϝϯςφϯεੑʹ ͭͳ͕Δɻ ࢓༷ͷ֬ೝ -4 EJWཁૉ͸ɺҰ੾ಛผͳҙຯΛ࣋ͨͳ͍ɻ͜ͷཁૉ͸ɺཁૉͷࢠΛද͢ɻ͜ͷཁૉ ͸ɺDMBTTɺMBOHɺ͓Αͼ࿈ଓͨ͠ཁૉͷά ϧʔϓʹڞ௨ͷηϚϯςΟοΫεΛϚʔ ΫΞοϓ͢ΔUJUMFଐੑͱͱ΋ʹ࢖༻Ͱ͖ΔɻEUཁૉͱEEཁૉͷάϧʔϓΛแΉɺEM ཁૉͰ΋࢖༻Ͱ͖Δɻ 8)"58(
   -JWJOH
   4UBOEBSE೔ຊޠ༁
   IUUQTNPNEPHJUIVCJPIUNMHSPVQJOHDPOUFOUIUNMUIFEJWFMFNFOU
6. ࢖༻্ͷ஫ҙ
   w EJW
   ཁૉ͸ɺଞʹద੾ͳηϚϯςΟοΫཁૉ
   BSUJDMFɺOBW
   ͳͲ
   ͕ͳ͍ɹ ৔߹ʹݶΓ࢖༻͍ͯͩ͘͠͞ɻ ࢓༷ͷ֬ೝ .%/ )5.-
   EJW
   ཁૉ͸ϑϩʔίϯςϯπͷͨΊͷ൚༻ίϯςφͰ͋Γɺຊ࣭తʹԿ ΋ද͠·ͤΜɻελΠϦϯάͷͨΊͷάϧʔϓཁૉͱͯ͠
   DMBTT
   ଐੑ͔
   JE
   ଐੑΛ ࢖༻ ɺ͋Δ͍͸จॻͰݴޠ͕ҟͳΔ෦෼Λࣔ͢
   MBOH
   ଐੑΛ࢖༻
   ͨΊʹ࢖༻͠ ·͢ɻ .%/
   IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.-&MFNFOUEJW
7. ܰʑ͘͠EJWཁૉ࢖͑ͳ͍
8. EJWʹ͞Ε͕ͪͳ
   ͔Θ͍ͦ͏ͳཁૉͨͪʜ IFBEFS GPPUFS NBJO CVUUPO OBW BTJEF TFDUJPO BSUJDMF pHVSF
9. ͢΂ͯ͸঺հ͖͠Εͳ͍ͷͰ
10. ͚ͭͩ͝঺հ NBJO pHVSF IFBEFSGPPUFS
11. NBJO EJW
    JENBJO
    
    
    
    ϝΠϯίϯςϯπ
    
    EJW Α͘ݟ͔͚ΔϚʔΫΞοϓ ؒҧ͍ͬͯΔΘ͚Ͱ͸ͳ͍
    NBJOཁૉͬͯͦ΋ͦ΋קࠂ͕஗͔ͬͨ͠ʜ
    Ͱ΋ͦΖͦΖʜ
12. NBJO NBJO
    
    
    
    ϝΠϯίϯςϯπ
    
    NBJO NBJOཁૉ࢖ͬͯΈͨϚʔΫΞοϓ ͖ͬ͞ΑΓྑͦ͞͏✨
    ଴ͬͯɺNBJOཁૉͬͯ*&͕αϙʔτͯ͠ͳ͍Β͍͠
    ͦͷͨΊɺ*&ͱεΫϦʔϯϦʔμʔͷҰ෦ͰΞΫηγϒϧʹͳ͍ͬͯͳ͍Έ͍ͨ
13. NBJO NBJO
    SPMFNBJO
    
    
    
    ϝΠϯίϯςϯπ
    
    NBJO ఏҊ͢ΔϚʔΫΞοϓ SPMFଐੑͰ*&ʹ΋ରԠͨ͠✨
    ଞͷϒϥ΢βͱͷࠩҟΛຒΊΔͨΊʹ$44΋ॻ͍ͨʢOPSNBMJ[FDTTʹؚ·Ε͍ͯΔʣ
    *&ͱ1$
    5BMLFS΍+"84ͷΑ͏ͳεΫϦʔϯϦʔμʔΛ૊Έ߹Θͤͯ΋ΞΫηγϒϧʹͳͬͨ NBJO
    \
    
    
    EJTQMBZ
    CMPDL
    ^
14. IFBEFS
    
    GPPUFS Α͘ݟ͔͚ΔϚʔΫΞοϓ IFBEFS
    
    
    
    άϩʔόϧϔομʔ
    
    IFBEFS
    NBJO
    
    
    
    ϝΠϯίϯςϯπ
    
    NBJO
    GPPUFS
    
    
    
    άϩʔόϧϑολʔ
    
    GPPUFS
15. IFBEFS
    
    GPPUFS BSUJDMF
    
    
    EJW
    DMBTTBSUJDMF@@IFBEFS
    
    
    
    
    IهࣄλΠτϧI
    
    
    EJW
    
    
    
    هࣄຊจͱ͔খݟग़͠ͱ͔
    
    
    
    EJW
    DMBTTBSUJDMF@@GPPUFS
    
    
    
    
    هࣄͷஶऀɺެ։೔ͳͲ
    Š
    
    
    EJW
    BSUJDMF Α͘ݟΔϚʔΫΞοϓ
16. IFBEFS
    
    GPPUFS BSUJDMF
    
    
    IFBEFS
    
    
    
    
    IهࣄλΠτϧI
    
    
    IFBEFS
    
    
    
    هࣄຊจͱ͔খݟग़͠ͱ͔
    
    
    
    GPPUFS
    
    
    
    
    هࣄͷஶऀɺެ։೔ͳͲ
    
    
    
    GPPUFS
    BSUJDMF ఏҊ͢ΔϚʔΫΞοϓ
17. pHVSF pHVSF
    
    
    JNH
    TSDlJNHTBNQMFQOHz
    BMUlTBNQMF
    JNBHFz
    
    
    pHDBQUJPOαϯϓϧը૾pHDBQUJPO
    pHVSF Α͘ݟΔ࣮૷ྫ ը૾ʹ͸࢖͍͚ͬͯͨͩͯΔ
    ը૾Ҏ֎ʹpHVSFཁૉ͔ͭ͑Δͱ͜Ζ͋Δͷ͔ͳʁ
18. pHVSF EJW
    DMBTTZPVUVCF
    
    
    
    ຒΊࠐΈಈը
    
    EJW Α͘ݟΔϚʔΫΞοϓ EJW
    DMBTTNBQ
    
    
    
    ຒΊࠐΈ஍ਤ
    
    EJW ಈը΍஍ਤ΋ࣗݾ׬݁ܕͷίϯςϯπͩʂ
19. pHVSF pHVSF
    
    
    
    ຒΊࠐΈಈը
    
    
    
    pHDBQUJPO
    
    
    
    
    DJUFಈըλΠτϧDJUF
    
    
    pHDBQUJPO
    pHVSF ఏҊ͢ΔϚʔΫΞοϓ pHVSF
    
    
    
    ຒΊࠐΈ஍ਤ
    
    pHVSF
20. ηϚϯςΟοΫʹ͢ΔͨΊʹ ϚʔΫΞοϓ͸ଞਓ͔Βࢦఠ͞Εʹ͍ͨ͘Ίɺҙࣝ͠ͳ͍ͱ্ୡ͠ͳ͍ɻ
    ࢲ͕͍ͯ͠Δ͜ͱ͸ओʹͭ
    w ͍͢͝ͱݴΘΕΔਓͷιʔεΛΑ͘ΈΔ
    w ؾʹͳΔͱ͜Ζ͸࢓༷ॻΛಡΉʢϗϯτ͸શ෦ಡΉͱ͍͍ʣ
    8"*"3*"΋͍͍͚Ͳɺ೥͸ϚʔΫΞοϓΛݟ௚͢͜ͱ͔Β࢝ΊΔΞΫηγϏϦ ςΟ͕ྲྀߦΔͱ͍͍ͳ