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

Transcript

1. 1.

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

2. 2.

   ໿ 10෼ؒ

3. 3.

   ࣗݾ঺հ

4. 4.

   None
5. 5.

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

6. 6.

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

   ࣮ફํ๏ • ·ͱΊ
7. 7.

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

   ࣮ફํ๏ • ·ͱΊ
8. 8.

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

9. 9.

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

10. 10.

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

11. 11.

    ͍ΘΏΔ ໝ૝Ͱ͢w

12. 12.

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

    ࣮ફํ๏ • ·ͱΊ
13. 13.

    ϝϦοτ • ಄ͷதͰίʔσΟϯά͕Ͱ͖ΔΑ͏ʹͳΔ • ͦΖ͹ΜͰݴ͏ɺ҉ࢉͱಉ͡ • จॻߏ଄ͷߟ͑ํ͕਎ʹͭ͘ • ͍ͭͰ΋Ͳ͜Ͱ΋Ͱ͖Δʂ •

    Ҋ݅Ͱ࢖͑͹ɺઃܭਤʹ΋ͳΔ • ίʔσΟϯά࣌ͷޮ཰Խʹ΋ܨ͕Δ • ৽ਓڭҭʹ΋࠷దʂ • ฐࣾͷݚमϓϩάϥϜʹ΋૊ΈࠐΜͰ·͢
14. 14.

    ४උ 8ׂɺ࣮૷ 2ׂ

15. 15.

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

16. 16.

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

    ࣮ફํ๏ • ·ͱΊ
17. 17.

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

18. 18.

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

19. 19.

    None
20. 20.

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

21. 21.

    None
22. 22.

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

    ࣮ફํ๏ • ·ͱΊ
23. 23.

    ·ͣ͸7ͭͷཁૉ͚ͩʂ

24. 24.

    1. ݟग़͠ʢϒϩοΫཁૉʣ 2. ςΩετʢϒϩοΫཁૉɾΠϯϥΠϯཁૉʣ 3. ϦετʢϒϩοΫཁૉʣ 4. ද૊ΈʢϒϩοΫཁૉʣ 5. ը૾ʢΠϯϥΠϯཁૉʣ

    6. ϦϯΫʢΠϯϥΠϯཁૉʣ 7. άϧʔϓԽʢϒϩοΫཁૉɾΠϯϥΠϯཁૉʣ
25. 25.

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

26. 26.

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

27. 27.

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

    ࣮ફํ๏ • ·ͱΊ
28. 28.

    1. ͓ؾʹೖΓͷαΠτΛΩϟϓνϟ͠ɺϓϦϯτΞ΢τ 2. ϨΠΞ΢τߏ଄ΛܬޫϖϯͰғ͍ͬͯ͘ 3. ֤ཁૉΛݟ͚ͭͯߏ଄Խ͍ͯ͘͠ 4. id໊ɺclass໊Λ෇༩͍ͯ͘͠ 5. ը૾͕͋Δ৔߹͸ɺϑΝΠϧ໊Λهࡌ͍ͯ͘͠

    6. font-sizeɺcolorɺmarginɺpaddingɺbackground͸͜ͷ࣌ ʹݕ౼͓ͯ͘͠ 7. ࣮͸ɺ͜Ε͕࣮ࡍʹίʔσΟϯά͢ΔࡍͷઃܭॻͱͳΔ 8. αΠτશମͰͳͯ͘΋ɺύʔπ͝ͱʹ೴಺ϚʔΫΞοϓ͢Δͷ ΋OK 9. ͱʹ͔͘ɺ਺Λ͜ͳ͢͜ͱ 10. ͜Ε͕ܦݧ஋ͱͳΓɺ࣮ફʹ׆͖͖ͯ·͢
29. 29.

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

    ࣮ફํ๏ • ·ͱΊ
30. 30.

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

31. 31.

    PR

32. 32.

    ϑϩϯτΤϯυ͔ΒWebͷະདྷΛߟ͑Δձ http://frontend-x.github.io/

33. 33.

    Thank you! http://www.kobatatakayuki.com @kobatatakayuki