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 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