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

Transcript

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

2. ໿ 10෼ؒ

3. ࣗݾ঺հ

4. None

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

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

   ࣮ફํ๏ • ·ͱΊ

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

   ࣮ફํ๏ • ·ͱΊ

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

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

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

11. ͍ΘΏΔ ໝ૝Ͱ͢w

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

    ࣮ફํ๏ • ·ͱΊ

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

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

14. ४උ 8ׂɺ࣮૷ 2ׂ

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

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

    ࣮ફํ๏ • ·ͱΊ

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

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

19. None

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

21. None

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

    ࣮ફํ๏ • ·ͱΊ

23. ·ͣ͸7ͭͷཁૉ͚ͩʂ

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

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

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

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

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

    ࣮ફํ๏ • ·ͱΊ

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

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

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

    ࣮ફํ๏ • ·ͱΊ

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

31. PR

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

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