コンテンツ・モデルのおはなし

HTML5から採用されたコンテンツ・モデルの考え方について、簡単に。
既存のブロックレベル要素・インライン要素との違いなど。

Transcript

1. ίϯςϯπɾϞσϧͷ͓͸ͳ͠
   
   BUTVLPB
   

   View Slide

2. )5.-ͷจষߏ଄ͷϕʔεʹͳΔߟ͑ํͷ͸ͳ͠
   ʁ
   

   View Slide

3. ͓͸ͳ͠ͷഎܠ
   ϒϩοΫϨϕϧཁૉͱΠϯϥΠϯཁૉ
   ίϯςϯπɾϞσϧͱΧςΰϦ
   ϒϩοΫϨϕϧͱΠϯϥΠϯͷߟ͑ํ
   ·ͱΊ
   

   View Slide

4. ͓͸ͳ͠ͷഎܠ
   ϒϩοΫϨϕϧཁૉͱΠϯϥΠϯཁૉ
   ίϯςϯπɾϞσϧͱΧςΰϦ
   ϒϩοΫϨϕϧͱΠϯϥΠϯͷߟ͑ํ
   ·ͱΊ
   

   View Slide

5. ʮ)5.-ฤू͔ͨ͠Β֬ೝͯ͠Ͷʯ
   ͋Δ೔
   ઌഐ͔Β
   

   View Slide

6. TQBO
   EJW
   QTBNQMFUFYUQ
   EJW
   TQBO
   

   View Slide

7. ؾ࣋ͪѱ͍ "A
   
   

   View Slide

8. ؾ࣋ͪѱ͞ͷਖ਼ମ
   ʹ͍ͭͯͷ͓͸ͳ͠Ͱ͢
   

   View Slide

9. ͓͸ͳ͠ͷഎܠ
   ϒϩοΫϨϕϧཁૉͱΠϯϥΠϯཁૉ
   ίϯςϯπɾϞσϧͱΧςΰϦ
   ϒϩοΫϨϕϧͱΠϯϥΠϯͷߟ͑ํ
   ·ͱΊ
   

   View Slide

10. ϒϩοΫϨϕϧཁૉ
    จষΛߏ੒͢Δجຊཁૉ
    ݟग़͠ɾஈམͳͲ
    લޙʹվߦ͕ೖΔ
    ΠϯϥΠϯཁૉ
    จষͷҰ෦΁ͷҙຯ෇͚
    ϦϯΫɾڧௐɾࣼମͳͲ
    લޙʹվߦ͸ೖΒͳ͍
    

    View Slide

11. ΠϯϥΠϯཁૉͷதʹ
    ϒϩοΫϨϕϧཁૉ͸ೖΕͳ͍ʁ
    

    View Slide

12. TQBO
    EJW
    QTBNQMFUFYUQ
    EJW
    TQBO
    

    View Slide

13. TQBO
    EJW
    QTBNQMFUFYUQ
    EJW
    TQBO
    JOMJOF
    CMPDL
    CMPDL
    

    View Slide

14. จষͷҰ෦Λҙຯ෇͚Δཁૉ TQBO
    ͷதʹ
    จষͷߏ੒ཁૉ EJW
    ͕ೖͬͯΔ
    JOMJOF
    CMPDL
    

    View Slide

15. Ͷʁؾ࣋ͪѱ͍Ͱ͠ΐʁ
    

    View Slide

16. ͓͸ͳ͠ͷഎܠ
    ϒϩοΫϨϕϧཁૉͱΠϯϥΠϯཁૉ
    ίϯςϯπɾϞσϧͱΧςΰϦ
    ϒϩοΫϨϕϧͱΠϯϥΠϯͷߟ͑ํ
    ·ͱΊ
    

    View Slide

17. ΠϯϥΠϯཁૉͱϒϩοΫϨϕϧཁૉͷߟ͑ํ͸
    )5.-Ͱഇࢭ͞Ε·ͨ͠
    

    View Slide

18. ˞$44ʹ͓͚ΔEJTQMBZϓϩύςΟͷ
    ஋ͱͯ͠ͷJOMJOFCMPDLͱ͸ผ෺
    

    View Slide

19. ίϯςϯπɾϞσϧ
    /&8
    

    View Slide

20. ʮཁૉ"ʹ͸ཁૉ#ΛೖΕΔ͜ͱ͕Ͱ͖Δʯ
    ͱ͍͏഑ஔϧʔϧ
    

    View Slide

21. ΧςΰϦʹίϯςϯπɾϞσϧ͝ͱͷ෼ྨ
    

    View Slide

22. ཁૉ"
    தʹೖΕͯ
    ͍͍ཁૉ
    ࣗ਎ͷ෼ྨ
    ࣗ਎͕ೖΕΔ
    ৔ॴ
    

    View Slide

23. ཁૉ"
    தʹೖΕͯ
    ͍͍ཁૉ
    ࣗ਎ͷ෼ྨ
    ࣗ਎͕ೖΕΔ
    ৔ॴ
    ίϯςϯπɾϞσϧ
    ΧςΰϦʔ
    ίϯςΩετ
    

    View Slide

24. ϝλσʔλɾίϯςϯπ จষ৘ใɾଞͷจষͱͷؔ܎Λఆٛ͢Δ΋ͷ
    ϑϩʔɾίϯςϯπ ࢠଙʹςΩετͳͲΛ΋ͭ΋ͷ
    ηΫγϣχϯάɾίϯςϯπ ݟग़͠ͱ֓ཁΛ͚ͭΒΕΔ΋ͷ
    ϔοσΟϯάɾίϯςϯπ ηΫγϣϯͷݟग़͠ʹͳΔ΋ͷ
    ϑϨʔδϯάɾίϯςϯπ ஈམͳͲͷதʹؚ·ΕΔจઅɾޠ۟ͳͲ
    ΤϯϕοσΟουɾίϯςϯπ จষʹଞͷϦιʔεΛຒΊࠐΉ΋ͷ
    ΠϯλϥΫςΟϒɾίϯςϯπ ϢʔβʔʹΑΔૢ࡞ʹରԠ͢Δ΋ͷ
    

    View Slide

25. 'MPX
    *OUFSBDUJWF
    )FBEJOH
    4FDUJPOJOH
    .FUBEBUB
    1ISBTJOH
    &NCFEEFE
    

    View Slide

26. FMFNFOU DBUFHPSZ DPOUFYU DPOUFOUNPEFMT
    I 'MPX)FBEJOH
    1BMQBCMF
    'MPX
    IHSPVQͷࢠཁૉͱͯ͠
    1ISBTJOH
    BSUJDMF 'MPX4FDUJPOJOH
    1BMQBCMF
    'MPX 'MPX
    B 'MPX1ISBTJOH
    *OUFSBDUJWF1BMQBCMF
    1ISBTJOH
    5SBOTQBSFOU

    ˞*OUFSBDUJWFҎ֎
    VM 'MPX
    ҰݸҎ্ͷMJΛؚΉ৔߹1BMQBCMF
    'MPX ݸҎ্ͷMJ
    

    View Slide

27. FMFNFOU DBUFHPSZ DPOUFYU DPOUFOUNPEFMT
    I 'MPX)FBEJOH
    1BMQBCMF
    'MPX
    IHSPVQͷࢠཁૉͱͯ͠
    1ISBTJOH
    BSUJDMF 'MPX4FDUJPOJOH
    1BMQBCMF
    'MPX 'MPX
    B 'MPX1ISBTJOH
    *OUFSBDUJWF1BMQBCMF
    1ISBTJOH
    5SBOTQBSFOU

    ˞*OUFSBDUJWFҎ֎
    VM 'MPX
    ҰݸҎ্ͷMJΛؚΉ৔߹1BMQBCMF
    'MPX ݸҎ্ͷMJ
    5SBOTQBSFOU
    !
    ਌ཁૉͷίϯςϯπɾϞσϧ
    ΛҾ͖ܧ͙
    

    View Slide

28. FMFNFOU DBUFHPSZ DPOUFYU DPOUFOUNPEFMT
    I 'MPX)FBEJOH
    1BMQBCMF
    'MPX
    IHSPVQͷࢠཁૉͱͯ͠
    1ISBTJOH
    BSUJDMF 'MPX4FDUJPOJOH
    1BMQBCMF
    'MPX 'MPX
    B 'MPX1ISBTJOH
    *OUFSBDUJWF1BMQBCMF
    1ISBTJOH
    5SBOTQBSFOU

    ˞*OUFSBDUJWFҎ֎
    VM 'MPX
    ҰݸҎ্ͷMJΛؚΉ৔߹1BMQBCMF
    'MPX ݸҎ্ͷMJ
    VMͷதʹ͸
    MJ͔͠ೖΕͳ͍
    !
    ಛघͳ৚͕݅͋Δཁૉ΋͋Δ
    EM UBCMF TFMFDU
    

    View Slide

29. վΊͯ࠷ॳͷίʔυΛݟͯΈΔ
    

    View Slide

30. TQBO
    EJW
    QTBNQMFUFYUQ
    EJW
    TQBO
    

    View Slide

31. FMFNFOU DBUFHPSZ DPOUFYU DPOUFOUNPEFMT
    TQBO
    'MPX1ISBTJOH
    1BMQBCMF
    1ISBTJOH 1ISBTJOH
    EJW
    'MPX
    1BMQBCMF
    'MPX 'MPX
    Q
    'MPX
    1BMQBCMF
    'MPX 1ISBTJOH
    

    View Slide

32. FMFNFOU DBUFHPSZ DPOUFYU DPOUFOUNPEFMT
    TQBO
    'MPX1ISBTJOH
    1BMQBCMF
    1ISBTJOH 1ISBTJOH
    EJW
    'MPX
    1BMQBCMF
    'MPX 'MPX
    Q
    'MPX
    1BMQBCMF
    'MPX 1ISBTJOH
    

    View Slide

33. TQBO
    EJW
    QTBNQMFUFYUQ
    EJW
    TQBO
    1ISBTJOH
    ΛೖΕͯ΄͍͠
    'MPX
    

    View Slide

34. ΍ͬͺΓؾ࣋ͪѱ͍ "A
    
    

    View Slide

35. ௚ͯ͠ΈΔ
    

    View Slide

36. EJW
    TQBO
    QTBNQMFUFYUQ
    TQBO
    EJW
    EJWͱTQBOΛ
    ೖΕସ͑ͯΈͨΑ
    

    View Slide

37. FMFNFOU DBUFHPSZ DPOUFYU DPOUFOUNPEFMT
    TQBO
    'MPX1ISBTJOH
    1BMQBCMF
    1ISBTJOH 1ISBTJOH
    EJW
    'MPX
    1BMQBCMF
    'MPX 'MPX
    Q
    'MPX
    1BMQBCMF
    'MPX 1ISBTJOH
    

    View Slide

38. EJW
    TQBO
    QTBNQMFUFYUQ
    TQBO
    EJW
    'MPX
    ΛೖΕͯ΄͍͠
    1ISBTJOH
    ΛೖΕͯ΄͍͠
    'MPX
    Α͘ͳ͍ʂ
    

    View Slide

39. TQBOͱQΛ
    ೖΕସ͑ͯΈͨΑ
    EJW
    Q
    TQBOTBNQMFUFYUTQBO
    Q
    EJW
    

    View Slide

40. EJW
    Q
    TQBOTBNQMFUFYUTQBO
    Q
    EJW
    'MPX
    ΛೖΕͯ΄͍͠
    1ISBTJOH
    ΛೖΕͯ΄͍͠
    ͍͍Ͷʂ
    

    View Slide

41. ͓͸ͳ͠ͷഎܠ
    ϒϩοΫϨϕϧཁૉͱΠϯϥΠϯཁૉ
    ίϯςϯπɾϞσϧͱΧςΰϦ
    ϒϩοΫϨϕϧͱΠϯϥΠϯͷߟ͑ํ
    ·ͱΊ
    

    View Slide

42. ϒϩοΫϨϕϧཁૉͱΠϯϥΠϯཁૉͷ
    ߟ͑ํ͸΋͏ཁΒͳ͍ʁ
    

    View Slide

43. جຊతʹ͸౿ऻ͍ͯ͠Δ
    

    View Slide

44. 'MPX
    *OUFSBDUJWF
    )FBEJOH
    4FDUJPOJOH
    .FUBEBUB
    1ISBTJOH
    &NCFEEFE
    

    View Slide

45. ϒϩοΫϨϕϧཁૉ
    ΠϯϥΠϯ
    ཁૉ
    ͍͍ͩͨ͜Μͳײ͡
    

    View Slide

46. ϒϩοΫϨϕϧͱΠϯϥΠϯΛࡉ෼Խͨ͠΋ͷ
    ʹίϯςϯπɾϞσϧ
    ϒϩοΫϨϕϧɾΠϯϥΠϯ͕Θ͔Δͱ
    ίϯςϯπɾϞσϧ͕Θ͔Γ΍͍͢
    

    View Slide

47. ͓͸ͳ͠ͷഎܠ
    ϒϩοΫϨϕϧཁૉͱΠϯϥΠϯཁૉ
    ίϯςϯπɾϞσϧͱΧςΰϦ
    ϒϩοΫϨϕϧͱΠϯϥΠϯͷߟ͑ํ
    ·ͱΊ
    

    View Slide

48. ؾ࣋ͪѱ͞ͷਖ਼ମʹෆਖ਼֬ͳจষߏ଄
    

    View Slide

49. ϚʔΫΞοϓ͢Δͱ͖ʹจষߏ଄͸௒େࣄ
    

    View Slide

50. ΑΓߏ଄తͳϚʔΫΞοϓͷجૅ
    ʹίϯςϯπɾϞσϧ
    ҙࣝ͠Α͏
    

    View Slide

51. 5IBOLT
    

    View Slide