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

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

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

044a0481dff208eade9ac1bdf30bf460?s=128

kobatatakayuki

February 18, 2017
Tweet

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