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

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

4dde07a2b63c5173af76dd473bc52c00?s=47 atsuco
April 15, 2014

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

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

4dde07a2b63c5173af76dd473bc52c00?s=128

atsuco

April 15, 2014
Tweet

More Decks by atsuco

Other Decks in Technology

Transcript

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

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

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

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

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

  6. TQBO EJW QTBNQMFUFYUQ EJW TQBO

  7. ؾ࣋ͪѱ͍ "A

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

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

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

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

  12. TQBO EJW QTBNQMFUFYUQ EJW TQBO

  13. TQBO EJW QTBNQMFUFYUQ EJW TQBO JOMJOF CMPDL CMPDL

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

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

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

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

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

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

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

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

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

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

  24. ϝλσʔλɾίϯςϯπ จষ৘ใɾଞͷจষͱͷؔ܎Λఆٛ͢Δ΋ͷ ϑϩʔɾίϯςϯπ ࢠଙʹςΩετͳͲΛ΋ͭ΋ͷ ηΫγϣχϯάɾίϯςϯπ ݟग़͠ͱ֓ཁΛ͚ͭΒΕΔ΋ͷ ϔοσΟϯάɾίϯςϯπ ηΫγϣϯͷݟग़͠ʹͳΔ΋ͷ ϑϨʔδϯάɾίϯςϯπ ஈམͳͲͷதʹؚ·ΕΔจઅɾޠ۟ͳͲ

    ΤϯϕοσΟουɾίϯςϯπ จষʹଞͷϦιʔεΛຒΊࠐΉ΋ͷ ΠϯλϥΫςΟϒɾίϯςϯπ ϢʔβʔʹΑΔૢ࡞ʹରԠ͢Δ΋ͷ
  25. 'MPX *OUFSBDUJWF )FBEJOH 4FDUJPOJOH .FUBEBUB 1ISBTJOH &NCFEEFE

  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
  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 ! ਌ཁૉͷίϯςϯπɾϞσϧ ΛҾ͖ܧ͙
  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
  29. վΊͯ࠷ॳͷίʔυΛݟͯΈΔ

  30. TQBO EJW QTBNQMFUFYUQ EJW TQBO

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

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

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

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

  35. ௚ͯ͠ΈΔ

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

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

    'MPX 1BMQBCMF 'MPX 'MPX Q 'MPX 1BMQBCMF 'MPX 1ISBTJOH
  38. EJW TQBO QTBNQMFUFYUQ TQBO EJW 'MPX ΛೖΕͯ΄͍͠ 1ISBTJOH ΛೖΕͯ΄͍͠ 'MPX

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

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

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

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

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

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

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

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

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

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

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

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

  51. 5IBOLT