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

Transcript

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

2. גࣜձࣾαʔΩϡϨʔγϣϯ
   ΤϯδχΞ ଜԬɹ݈ਓʢ͚Μͯ͌ʣ 7VFKTɺ3FBDU
   
   3FEVYɺΞΫηγϏϦςΟɺ
   σβΠϯɺϒϩοΫνΣʔϯɺϥϯχϯά !"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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠