Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

atsuco
April 15, 2014

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

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

atsuco

April 15, 2014
Tweet

More Decks by atsuco

Other Decks in Technology

Transcript

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

    BUTVLPB

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. TQBO
    EJW
    QTBNQMFUFYUQ
    EJW
    TQBO

    View full-size slide

  7. ؾ࣋ͪѱ͍ "A

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. TQBO
    EJW
    QTBNQMFUFYUQ
    EJW
    TQBO

    View full-size slide

  13. TQBO
    EJW
    QTBNQMFUFYUQ
    EJW
    TQBO
    JOMJOF
    CMPDL
    CMPDL

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  30. TQBO
    EJW
    QTBNQMFUFYUQ
    EJW
    TQBO

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide