読んだ内容まとめてLT会「インクルーシブHTML+CSS&JavaScript」

57dd46f257fa4af9fd1ea234e85b3868?s=47 K.Akoarum
October 11, 2018

 読んだ内容まとめてLT会「インクルーシブHTML+CSS&JavaScript」

2018.10.11の「読んだ内容まとめてLT会」の発表資料です。

57dd46f257fa4af9fd1ea234e85b3868?s=128

K.Akoarum

October 11, 2018
Tweet

Transcript

  1. ΠϯΫϧʔγϒ)5.- $44+BWB4DSJQU 5)6ಡΜͩ಺༰·ͱΊͯ-5ձEFNP

  2. גࣜձࣾαʔΩϡϨʔγϣϯΤϯδχΞ ଜԬɹ݈ਓʢ͚Μͯ͌ʣ 7VFKTɺ3FBDU3FEVYɺΞΫηγϏϦςΟɺ σβΠϯɺϒϩοΫνΣʔϯɺϥϯχϯά !"LPBSVN@, IUUQTXXXBLPBSVNOFU

  3. ΞΫηγϏϦςΟ͚ͩͰͳ͘ɺ શͯͷϢʔβʔΛࢹ໺ʹೖΕͨྑॻ 8FC΍ΔਓΈΜͳʹಡΜͰ΄͍͠ɻ ΞΫηγϏϦςΟք۾ࡾେॻ੶ͷ࡭

  4. ΠϯΫϧʔγϒͱ͸ w แׅతͳɺแؚతͳ w ։์తͳ w ഉଞతʢFYDMVTJWFʣͷରٛޠ ͜͜Ͱ͸ɺಛఆͷਓΛআ֎͠ͳ͍ͷҙຯɻ ˠશͯͷϢʔβʔΛड͚ೖΕΔ͜ͱΛΠϯΫϧʔγϒͰ͋Δͱ͢Δɻ

  5. ΠϯΫϧʔγϒΛֶͿʹ͸ຊ౰ʹྑॻ w ϑΟϧλʔ΢ΟδΣοτͳͲ۩ମతͳ6*ͷ࣮૷ྫΛ঺հ w ༁஫΍ิ଍ͳͲ΋๛෋Ͱͱͯ΋ਂ͘ཧղͰ͖Δ

  6. WJTVBMMZIJEEFO

  7. Α͘ݟ͔͚ΔɺΑ͘΍Δ)5.-ϚʔΫΞοϓ Α͘ͳ͍ϚʔΫΞοϓ <h1>ݟग़͠λΠτϧ</h1> <h2>αϒηΫγϣϯ</h2> ݟग़͠λΠτϧ ʙαϒηΫγϣϯʙ Α͘΍ΔϚʔΫΞοϓ <h1>ݟग़͠λΠτϧ <span class=“sub”>αϒηΫγϣϯ</span></h1>

  8. WJTVBMMZIJEEFOͷ࢖༻ͯ͠ΑΓ໌֬ʹ͢Δ <h1>ݟग़͠λΠτϧ</h1> <p><span class=“visually-hidden”>αϒλΠτϧɿ</span>αϒηΫγϣϯ</p> .visually-hidden { position: absolute; width: 1px;

    height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } )5.- $44 ݟग़͠λΠτϧ ʙαϒηΫγϣϯʙ
  9. ແݶεΫϩʔϧͷՄ൱

  10. ແݶεΫϩʔϧ͸ઈର/( ͳͥʁ w εΫϩʔϧόʔͷϋϯυϧ͕Ҡಈͯ͠ɺͱͯ΋ෆշͳಈ͖Λ͢Δ w ແݶεΫϩʔϧͷԼʹ͋ΔίϯςϯπʹΞΫηεͰ͖ͳ͍ w ಛʹ5BCΩʔͰϝΠϯίϯςϯπΛൈ͚ΒΕͳ͘ͳͬͯඇৗʹෆշ ୅ସҊ w

    ʮ΋ͬͱಡΈࠐΉʯϘλϯʹஔ͖׵͑Δ w ࣗಈಡΈࠐΈΛΦϯʹ͢Δ͔ΛϓϩϯϓτͰਘͶΔ
  11. ϑΥʔϜͷ࣮૷

  12. ϥϕϧ෇͚ <div>ύεϫʔυ</div> <div><input type=“password”></div> ˣ <div><label for=“password”>ύεϫʔυ</label></div> <div><input type=“password” id=“password”></div>

    MBCFMཁૉΛ࢖ͬͯϥϕϧͱϑΟʔϧυΛඥ͚ͮΔɻ ౰ͨΓલͷ͜ͱ͚ͩͲɺͰ͖ͯͳ͍αΠτΛΑ͘ݟΔؾ͕͢Δʜ
  13. QMBDFIPMEFSଐੑ <input type=“text” placeholder=“eg. HotStuff666”> σϑΥϧτͩͱάϨʔͰίϯτϥετൺʹ໰୊Λىͨ͜͢Ίɺ $44Λௐ੔͢Δɻ ʢݪஶͰ͸ΠλϦοΫʹ͢Δͱ͋Δ͕ɺ೔ຊޠͰ͸ಡΈʹ͍ͨ͘Ίɺ ผͷํ๏Λݕ౼͢΂͖ʣ ::-webkit-input-placeholder,

    ::-moz-placeholder, ::placeholder { color: #000; }
  14. ඞਢϑΟʔϧυ ඞਢΛද͢ʮ ʯ΍ʮ˞ʯ͸BSJBIJEEFOʹ͢Δ <label for=“name”>໊લ<span aria-hidden=“true”>※</span></label> ಡΈ্͛ͯ͠·͏͜ͱͰޡղΛ༩͔͑Ͷͳ͍ͨΊɺ ಡΈ্͛ͤ͞ͳ͍Α͏ʹ͢Δɻ BSJBSFRVJSFEଐੑΛ࢖͏ <input

    type=“text” name=“name” aria-required=“true”> ݪஶͰ͸SFRVJSFEଐੑͷରԠ͕ෆे෼ͳͨΊɺ BSJBSFRVJSFEଐੑΛ࢖͏͜ͱΛਪ঑͍ͯͨ͠Α͏Ͱ͢ɻ
  15. ύεϫʔυ͸දࣔͰ͖ΔΑ͏ʹ͢Δ දࣔΛͰ͖ΔΑ͏ʹ্ͨ͠Ͱɺύεϫʔυͷ֬ೝ༻ʹ΋͏Ұ౓ ೖྗͤ͞ΔΠϯλʔϑΣΠεΛ΍Ίͤ͞Δɺͱ͍͏͜ͱ΋ɻ +BWB4DSJQUͰUZQFଐੑΛॻ͖׵͑Δ͜ͱͰදࣔͤ͞Δ͜ͱ͕ Ͱ͖ΔͨΊɺ͜ΕΛ࣮૷͢Δɻ ͳ͓ɺ*OUFSOFU&YQMPSFSͱ.JDSPTPGU&EHFʹ͸ ඪ४ػೳͱ࣮ͯ͠૷͞Ε͍ͯΔͨΊɺ཈੍͓ͯ͘͠ඞཁ͕͋Δɻ

  16. ύϑΥʔϚϯεΛҡ࣋͢Δ

  17. ίϯςϯπΛૣ͘දࣔ͢Δ͜ͱ΋ΠϯΫϧʔγϒ w ը૾ͷ࠷దԽ w $44ɺ+BWB4DSJQUͷ࠷దԽɾϛχϑΝΠԽ w ϑΥϯτͷαϒηοτԽ (PPHMF'POUTͷαϒηοτ UFYUύϥϝʔλΛ෇༩͢Δ͜ͱͰඞཁͳจࣈͷϦετΛઃఆͰ͖Δ <link

    href=“https://fonts.[লུ]/css?family=Roboto:900&text=ABCDEFG" rel="stylesheet">
  18. ͜ͷຊΛಡΜͰࢥͬͨ͜ͱ

  19. w )5.-͸ηϚϯςΟοΫ͕௒ॏཁʂʂ w $44ʢσβΠϯʣ΋σβΠϯੑ͚ͩͰݟͣɺՄಡੑͳͲ΋ҙ ࣝ͢Δ͜ͱ͕େࣄ w ͱʹ͔͋͘ΒΏΔϢʔβʔΛड͚ೖΕΒΕΔίʔσΟϯάΛ
 ҙࣝ͢Δʂ w ϑϩϯτΤϯυ΍ΔͳΒ΍ͬͺΓΠϯΫϧʔγϒ΍


    ΞΫηγϏϦςΟͳͲΛҙ͍͖͍ࣝͯͨ͠ʜʂ
  20. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠