Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML・CSS勉強会1

Ce075075c165a8428a5974ac00b7a5cf?s=47 rhythm191
November 21, 2019

 HTML・CSS勉強会1

Gino inc. でやったHTML・CSS勉強会です。

アクセシビリティ(a11y)について話しました。

元のキーノートはここ
https://github.com/rhythm191/html-conference-in-gino

Ce075075c165a8428a5974ac00b7a5cf?s=128

rhythm191

November 21, 2019
Tweet

Transcript

  1. )5.-ɾ$44ษڧձ̍ ΞΫηγϏϦςΟ BZ ฤ (JOPJODۚݪ

  2. ໨ඪ஋ ΞΫηγϏϦςΟͬͯॏཁ 8$"( 8"*"3*" ΞΫηγϏϦςΟπϦʔ ηϚϯςΟοΫ ΠϯΫϧʔγϒ ΞϑΥʔμϯε ίϯτϥετ

  3. ͍͍)5.-ͬͯʁ

  4. ແݶʹબ୒ࢶ͕͋Δ )5.-

  5. ྫ͑͹͜ͷϘλϯ

  6. Ͳ͏ͱͰ΋ͳΔ

  7. ͜Μͳͷઈର͓͔͍͠Α w ਓ͕ؒ։ൃ͠΍ͮ͢Β͍ w ػցతʹ൑ผͰ͖ͳ͍ ݕࡧΤϯδϯɺεΫϦʔϯϦʔ μʔ w 5BCΩʔͰϘλϯؒΛҠಈͰ͖ͳ͍ w

    ΤϯλʔΩʔͰϘλϯΛΞΫςΟϒʹͰ͖ͳ͍ w αΠζ͕૿͑ΔͷͰ஗͍ωοτϫʔΫରࡦ͕Ͱ͖ͳ͍
  8. શ෦ΞΫηγϏϦςΟͷ࿩ w ਓ͕ؒ։ൃ͠΍ͮ͢Β͍ w ػցతʹ൑ผͰ͖ͳ͍ ݕࡧΤϯδϯɺεΫϦʔϯϦʔ μʔ w 5BCΩʔͰϘλϯؒΛҠಈͰ͖ͳ͍ w

    ΤϯλʔΩʔͰϘλϯΛΞΫςΟϒʹͰ͖ͳ͍ w αΠζ͕૿͑ΔͷͰ஗͍ωοτϫʔΫରࡦ͕Ͱ͖ͳ͍ ώϡʔϚϯϦʔμϏϦςΟ ΩʔϘʔυΞΫηγϏϦςΟ ϞόΠϧΞΫηγϏϦςΟ ϚγϯϦʔμϏϦςΟ
  9. ͦ΋ͦ΋BZͱ͸ʁ w Ͱ͖ΔݶΓଟ͘ͷਓʹ࢖ͬͯ΋Β͑ΔΑ͏ʹ͢Δ͜ͱ w ϋϯσΟΩϟοϓΛ͍࣋ͬͯΔਓ w ਓؒҎ֎ ݕࡧΤʔδΣϯτɺεΫϨΠϐϯά w ϞόΠϧσόΠε

    w ஗͍ωοτϫʔΫ w ΑΓߴੑೳͳ୺຤
  10. ϦϯΫ͸ͳͥ੨৭ͳͷ͔ʁ

  11. ৭֮ಛੑͷͨΊͷBZ

  12. $5"ʹ΋Өڹ͢Δ w എܠ৭ͱϘλϯ৭ͷ߹ΘͤํͰݟ΍͕͢͞มΘΔ

  13. ೔ຊͷ৭֮ಛੑ૚ ஍Ҭ உੑ ঁੑ ೔ຊ   Ԥถ ʙ 

    ΞϑϦΧ ʙ ΞΫηεͨ͠ਓͷ͕ԠืϘλϯΛೝࣝͰ͖ͳ͍ʁ
  14. ੈքͷBZ w BZͷ୲อ͸๏཯ͰఆΊΒΕ͍ͯΔ஍Ҭ΋͋Δ w &6&/ w ถࠃϦϋϏϦςʔγϣϯ๏ w ӳࠃΞΫηγϏϦςΟنଇ w

    ߽भো֕ऀࠩผېࢭ๏
  15. ถࠃͷBZͷૌুࣄྫ਺      ೥ ೥  

  16. BZ͕௿͍ͱ·͍ͣੈք͕ དྷΔ͔΋͠Εͳ͍ ҰମͲ͜ͷαΠτͳΜͩʁ

  17. BZΞΫηεͨ͠શ͕ͯର৅ w ো͕͍ऀ͚͕ͩλʔήοτ૚Ͱ͸ͳ͍ w ϞόΠϧ୺຤Ͱ1$αΠτ͕ݟ͑ͳ͔ͬͨΓ w l͜ͷίϯςϯπ͸͓ॅ·͍ͷ஍ҬͰ͸࢖༻Ͱ͖·ͤΜz

  18. ςΩετը૾ͷฐ֐ &OHMJTI 0,

  19. ΞΫηεͯ͘͠Δ શͯͷϢʔβʔ͕ର৅

  20. ΞΫηγϏϦςΟͬͯॏཁ

  21. BZΛҙࣝͨ͠։ൃ Ͱ͖ΔݶΓ;͞Θ͍͠ )5.-Λॻ͘ ཧղՄೳ ϑΥʔΧε ίϯτϥετ ςΩεταΠζ ΩʔϘʔυΞΫηε ༧ଌՄೳ

  22. Ͱ͖ΔݶΓ;͞Θ͍͠)5.- w Ͱ͖ΔݶΓηϚϯςΟοΫʹ͔͘ w IFBEFS GPPUFS NBJO BSUJDMF OBW w

    FN TUSPOH DJUF BEESFTTʜ w ͪΌΜͱΠϯλϥΫτͰ͖ΔΑ͏ʹ͢Δ w CVUUPOͱ͔MJOLʹIPWFS GPDVT BDUJWFͱ͔ʜ w 8"*"3*"Ͱิ଍͢Δ
  23. ΞΫηγϏϦςΟπϦʔ w %0.ͱ̍ର̍Ͱ࡞੒͞ΕΔɻ w ̐ͭͷ৘ใΛ࣋ͭ w SPMF໾ׂ΍छྨΛද͢ TFBDI OBWJHBUJPOͱ͔ w

    OBNFϥϕϦϯάཁૉ ྫɿύϯͣ͘Ϧετ w WBMVF w TUBUF
  24. 8"*"3&"ͱ͔ w )5.-͚ͩͰ͸ҙຯ෇͚Ͱ͖ͳ͍෦෼Λิ͏΋ͷ w ͱΓ͋͑ͣࠓճ͸͚̏ͭͩ঺հ w SPMF w BSJBMBCFM w

    BSJBIJEEFO BSJBDPOUSPMT BSJBIBTQPQVQ BSJBMJWF BSJBEFTDSJCFECZ BSJBBUPNJD BSJBCVTZ
  25. SPMF w λάʹରͯ͠௥Ճͷҙຯ΍໾ׂΛઃఆ͢Δ w ϥϯυϚʔΫTFBSDI NBJO OBWJHBUJPO CBOOFS w จॻߏ଄BSUJDMF

    IFBEJOH MJTU UPPMCBS UPPMUJQ w ΢ΟδΣοτCVUUPO MJOL UBC TXJUDI w ෳ߹6*΢ΟδΣοτUBCMJTU MJTUCPY DPNCPCPY
  26. ϥϯυϚʔΫϩʔϧ w ϖʔδͷߏ੒Λ೺ѲͰ͖ΔΑ͏ʹͳΔ w ϥϯυϚʔΫؒ͸Ҡಈ͕Մೳ w FY TFBSDI NBJO OBWJHBUJPO

    CBOOFS DPOUFOUJOGP
  27. จॻߏ଄ϩʔϧ w ίϯςϯπΛମܥ͚ͮΔߏ଄ͰΠϯλϥΫςΟϒͰͳ͍΋ ͷ w FY BSUJDMF JNH MJTU QSFTFOUBUJPO

    UPPMCBS UPPMUJQ
  28. ΢ΟδΣοτϩʔϧ w ϢʔβʔΠϯλʔϑΣʔε΢ΟδΣοτ w ΩʔϘʔυΞΫηγϏϦςΟͱ͔͕෇༩͞ΕΔ w FY CVUUPO MJOL TXJUDI

    UBC
  29. BSJBMBCFM w )5.-ଆʹೝࣝՄೳͳ৘ใΛՃ͑Δ

  30. ϚγϯϦʔμϒϧͳ ৘ใΛՃ͑Δ w ΞΫηγϏϦςΟπϦʔͷOBNFΛܾΊΔ <nav aria-label="breadcrumbs"> <ol> <li><a href="#">Home</a></li> <li><a

    href="#">Parent</a></li> <li><a href="#" aria-current="page">Child</a></li> </ol> </nav> <nav aria-label="main menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">More Information</a></li> </ul> </nav>
  31. BSJBIJEEFO w εΫϦʔϯϦʔμʔ΍ΩʔϘʔυ͔Βແࢹ͢Δ΋ͷʹ෇༩ w ΞΠίϯϑΥϯτ w ϞʔμϧͷόοΫάϥ΢ϯυ

  32. ϞʔμϧͷόοΫάϥ΢ϯυʁ

  33. ࢀߟจݙ w IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT-FBSO "DDFTTJCJMJUZ w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT BDDFTTJCJMJUZ IMKB w IUUQTBZTUZMFHVJEFDPNTUZMFHVJEF

    w IUUQTXBJDKQEPDT8$"(0WFSWJFXIUNM w ΠϯΫϧʔγϒ)5.- ෼ࣨʹ͋Δຊ
  34. ͓·͚ɿ8$"( w 8$"( 8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFT  w 8FCαΠτΛΞΫηγϏϦςΟʹ͢Δํ๏Λఆٛ w ஌֮Մೳ w

    ૢ࡞Մೳ w ཧղՄೳ w ݎ࿚ੑ w "ʙ"""ͷద߹ϨϕϧΛఆΊ͍ͯΔ
  35. ͓·͚ɿ஫໨͞ΕΔ8$"( w ҙࣝߴ͍ܥاۀʹͳΕΔ٩ Т و