脳内マークアップのススメ

by kobatatakayuki

Slide 1

Slide 1 text

೴಺ϚʔΫΞοϓͷεεϝ 2017-02-18 ໊ݹ԰ϚʔΫΞοϓษڧձ @kobatatakayuki - Takayuki Kobata

Slide 2

Slide 2 text

໿ 10෼ؒ

Slide 3

Slide 3 text

ࣗݾ঺հ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

খാλΧϢΩ גࣜձࣾΞφάϥϜϫʔΫε CKO / γχΞςΫχΧϧσΟϨΫλʔ

Slide 6

Slide 6 text

ΞδΣϯμ • ೴಺ϚʔΫΞοϓͱ͸ • ϝϦοτ • ཁૉͷ਌ࢠؔ܎Λ஌Δ • HTML7ͭͷجຊߏ੒ཁૉ • ࣮ફํ๏ • ·ͱΊ

Slide 7

Slide 7 text

ΞδΣϯμ • ೴಺ϚʔΫΞοϓͱ͸ • ϝϦοτ • ཁૉͷ਌ࢠؔ܎Λ஌Δ • HTML7ͭͷجຊߏ੒ཁૉ • ࣮ફํ๏ • ·ͱΊ

Slide 8

Slide 8 text

ීஈίʔσΟϯάΛ͞ΕͯΔ ํ͍Βͬ͠Ό͍·͔͢ʁ

Slide 9

Slide 9 text

೴಺ϚʔΫΞοϓͬͯฉ͍ͨ ͜ͱ͋Γ·͔͢ʁ

Slide 10

Slide 10 text

಄ͷதͰ จॻΛߏ଄Խ ͍ͯ͘͜͠ͱ

Slide 11

Slide 11 text

͍ΘΏΔ ໝ૝Ͱ͢w

Slide 12

Slide 12 text

ΞδΣϯμ • ೴಺ϚʔΫΞοϓͱ͸ • ϝϦοτ • ཁૉͷ਌ࢠؔ܎Λ஌Δ • HTML7ͭͷجຊߏ੒ཁૉ • ࣮ફํ๏ • ·ͱΊ

Slide 13

Slide 13 text

ϝϦοτ • ಄ͷதͰίʔσΟϯά͕Ͱ͖ΔΑ͏ʹͳΔ • ͦΖ͹ΜͰݴ͏ɺ҉ࢉͱಉ͡ • จॻߏ଄ͷߟ͑ํ͕਎ʹͭ͘ • ͍ͭͰ΋Ͳ͜Ͱ΋Ͱ͖Δʂ • Ҋ݅Ͱ࢖͑͹ɺઃܭਤʹ΋ͳΔ • ίʔσΟϯά࣌ͷޮ཰Խʹ΋ܨ͕Δ • ৽ਓڭҭʹ΋࠷దʂ • ฐࣾͷݚमϓϩάϥϜʹ΋૊ΈࠐΜͰ·͢

Slide 14

Slide 14 text

४උ 8ׂɺ࣮૷ 2ׂ

Slide 15

Slide 15 text

ࣄલ४උʹͲΕ͚ͩ࣌ؒΛ࢖ ͑Δ͔͕ɺίʔσΟϯάʹ͓ ͚Δޮ཰Խͷ伴ͱͳΔ

Slide 16

Slide 16 text

ΞδΣϯμ • ೴಺ϚʔΫΞοϓͱ͸ • ϝϦοτ • ཁૉͷ਌ࢠؔ܎Λ஌Δ • HTML7ͭͷجຊߏ੒ཁૉ • ࣮ફํ๏ • ·ͱΊ

Slide 17

Slide 17 text

HTML4.01࣌୅ͷϒϩοΫཁ ૉͱΠϯϥΠϯཁૉͷ֓೦Λ ஌͓ͬͯ͘

Slide 18

Slide 18 text

ਆ࡚ઌੜͷ͘͝؆୯ͳHTML ͷઆ໌͸ඞಡ ࢀߟɿ͘͝؆୯ͳHTMLͷઆ໌ -- ཁૉλΠϓҰཡʢ֎෦ϦϯΫʣ

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

DTDΛಡΊΔਓ͸ಡΜͰΈͯ ͍ͩ͘͞ɻ ࢀߟɿHTML 4 Document Type Deﬁnitionʢ֎෦ϦϯΫʣ

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

ΞδΣϯμ • ೴಺ϚʔΫΞοϓͱ͸ • ϝϦοτ • ཁૉͷ਌ࢠؔ܎Λ஌Δ • HTML7ͭͷجຊߏ੒ཁૉ • ࣮ફํ๏ • ·ͱΊ

Slide 23

Slide 23 text

·ͣ͸7ͭͷཁૉ͚ͩʂ

Slide 24

Slide 24 text

1. ݟग़͠ʢϒϩοΫཁૉʣ 2. ςΩετʢϒϩοΫཁૉɾΠϯϥΠϯཁૉʣ 3. ϦετʢϒϩοΫཁૉʣ 4. ද૊ΈʢϒϩοΫཁૉʣ 5. ը૾ʢΠϯϥΠϯཁૉʣ 6. ϦϯΫʢΠϯϥΠϯཁૉʣ 7. άϧʔϓԽʢϒϩοΫཁૉɾΠϯϥΠϯཁૉʣ

Slide 25

Slide 25 text

ϚʔΫΞοϓ͸ύζϧͷΑ͏ ͳ΋ͷ

Slide 26

Slide 26 text

7ͭͷجຊߏ੒ཁૉΛ࢖͍͜ ͳͤ͹ɺίϯϙʔωϯτઃܭ ʹ΋໾ཱͭ

Slide 27

Slide 27 text

ΞδΣϯμ • ೴಺ϚʔΫΞοϓͱ͸ • ϝϦοτ • ཁૉͷ਌ࢠؔ܎Λ஌Δ • HTML7ͭͷجຊߏ੒ཁૉ • ࣮ફํ๏ • ·ͱΊ

Slide 28

Slide 28 text

1. ͓ؾʹೖΓͷαΠτΛΩϟϓνϟ͠ɺϓϦϯτΞ΢τ 2. ϨΠΞ΢τߏ଄ΛܬޫϖϯͰғ͍ͬͯ͘ 3. ֤ཁૉΛݟ͚ͭͯߏ଄Խ͍ͯ͘͠ 4. id໊ɺclass໊Λ෇༩͍ͯ͘͠ 5. ը૾͕͋Δ৔߹͸ɺϑΝΠϧ໊Λهࡌ͍ͯ͘͠ 6. font-sizeɺcolorɺmarginɺpaddingɺbackground͸͜ͷ࣌ ʹݕ౼͓ͯ͘͠ 7. ࣮͸ɺ͜Ε͕࣮ࡍʹίʔσΟϯά͢ΔࡍͷઃܭॻͱͳΔ 8. αΠτશମͰͳͯ͘΋ɺύʔπ͝ͱʹ೴಺ϚʔΫΞοϓ͢Δͷ ΋OK 9. ͱʹ͔͘ɺ਺Λ͜ͳ͢͜ͱ 10. ͜Ε͕ܦݧ஋ͱͳΓɺ࣮ફʹ׆͖͖ͯ·͢

Slide 29

Slide 29 text

ΞδΣϯμ • ೴಺ϚʔΫΞοϓͱ͸ • ϝϦοτ • ཁૉͷ਌ࢠؔ܎Λ஌Δ • HTML7ͭͷجຊߏ੒ཁૉ • ࣮ફํ๏ • ·ͱΊ

Slide 30

Slide 30 text

1. ೴಺ϚʔΫΞοϓͱ͸ɺ಄ͷதͰจॻΛߏ଄Խ ͍ͯ͘͜͠ͱ 2. HTML4.01࣌୅ͷϒϩοΫཁૉͱΠϯϥΠϯཁ ૉͷ֓೦Λ஌͓ͬͯ͘ 3. ·ͣ͸7ͭͷཁૉ͚ͩʂ 4. ࣮ફ͋ΔͷΈʂ

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text