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

2017-02-18 名古屋マークアップ勉強会
@kobatatakayuki - Takayuki Kobata

Transcript

1. ೴಺ϚʔΫΞοϓͷεεϝ 2017-02-18 ໊ݹ԰ϚʔΫΞοϓษڧձ @kobatatakayuki - Takayuki Kobata
2. ໿ 10෼ؒ
3. ࣗݾ঺հ
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ͷઆ໌ -- ཁૉλΠϓҰཡʢ֎෦ϦϯΫʣ
20. DTDΛಡΊΔਓ͸ಡΜͰΈͯ ͍ͩ͘͞ɻ ࢀߟɿHTML 4 Document Type Definitionʢ֎෦ϦϯΫʣ
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