Code Colors!

デ部会「第5回 色にまつわるデザインのお話」
2017年7月26日（水）

Transcript

1. Code Colors! Hibiki kudo
 Iret .inc
2. qiita@hibikikudo
3. ࠓ೔ͷ֓ཁ • ৭Λѻ͏CSSϓϩύςΟͷ͓͞Β͍ͱɺ ͜Ε͔Β࢖ͬͯΈ͍ͨ৽ϓϩύςΟ • Performance • A11y • ը૾ɺCanvasɺSVGɺWebGLʹ͍ͭͯ ͸ࠓճϊʔλονͰ͢
4. ৭Λѻ͏CSSϓϩύςΟ ͓͞Β͍
5. ৭Λѻ͏CSSϓϩύςΟ • color • background-color • background-image • border-color • outline-color • box-shadow • text-shadow
6. CSSʹ͓͚Δ৭ͷࢦఆํ๏ • named-color • hex-color • rgb(a) • hsl(a)
7. CSSʹ͓͚Δ৭ͷࢦఆํ๏ element { color: red; } element { color: #ff0000; } element { color: rgb(255,0,0); } element { color: hsl(0, 100%, 50%); } /* 50% ಁա */ element { color: rgba(255, 0, 0, 0.5); } element { color: hsla(0, 100%, 50%, 0.5); }
8. ͜ΕΒͷϓϩύςΟΛ ૊Έ߹ΘͤΔͱ ͜Μͳ࡞඼΋ ࡞Ε·͢ɻ
9. CSS Flags http://pixelastic.github.io/css-flags/
10. 5000ஹԁཉ͍͠!CSS https://codepen.io/VoQn/pen/jwjdOq
11. ৭Λѻ͏CSSϓϩύςΟ • -webkit-scrollbar-track • -webkit-scrollbar-thumb ↑ εΫϩʔϧόʔΛσβΠϯͰ͖Δ
13. ࢖ͬͯΈ͍ͨ mix-blend-mode
14. mix-blend-modeͱ͸ • ཁૉͷ಺༰ͱɺԼͷϨΠϠʔʹ͋Δཁૉͷ಺ ༰΍ཁૉͷഎܠ৭ΛΛͲͷΑ͏ʹϒϨϯυ͢ Δ͔Λࣔ͠·͢ɻ • ཁ͸PhotoshopͷඳըϞʔυ͕CSSͰ࢖͑ Δʂ • Θ͔ͣ1ߦͷCSSͰ໘ന͍දݱ͕Ͱ͖Δ
17. CSS1ߦͰ࣮૷Ͱ͖Δ .hero-text{ mix-blend-mode: overlay; } .battery{ mix-blend-mode: difference; }
18. ΄ͱΜͲͷϞμϯϒϥ΢β͕ରԠࡁΈʂ Internet Explorer͸ಈ࡞Λఀࢭ͠·ͨ͠
20. Performance
21. CSSͷॻ͖ํͰ ύϑΥʔϚϯε͸ มΘΔɻ
22. ಛʹΞχϝʔγϣϯͰ͸ ॏཁɻ
24. ͦ΋ͦ΋ ϒϥ΢β͸ͲͷΑ͏ʹ ৭΍ը૾Λඳը͍ͯ͠Δ͔
25. 1. loading 3. rendering 2. scriping 4. painting
26. ࠶ඳը(re-painting)ίετΛԼ͛ Δ͜ͱ͕ύϑΥʔϚϯεΛ্͛Δʂ ฒ΂ͯɹɹඳըͯ͠ɹϨΠϠʔΛ߹੒ ࠶ඳըίετΛߟ͑ͨCSSΛॻ͜͏
27. ࠶ඳըίετ͕ߴ͘ɺϗόʔɺΫϦοΫɺ εΫϩʔϧʹ࿈ಈͨ͠ΞχϝʔγϣϯͰ͜ ΕΒΛ࢖͏ͱύϑΥʔϚϯε͕down… ɾdisplay ɾposition ɾmargin ɾpadding ͜ΕΒͷϓϩύςΟ͸ layout͔Β࢝·Δશͯͷ ࠶ඳըϓϩηε͕Ҿ͖ى͜͞ΕΔɻ
28. ࠶ඳըίετɺύϑΥʔϚϯε͸ී௨ɻ ɾcolor ɾbackground ɾtext-decoration ɾborder ͜ΕΒͷϓϩύςΟ͸paint͔Β ࠶ඳըϓϩηε͕ى͜͞ΕΔɻ
29. ࠷ߴͷϋΠɾύϑΥʔϚϯεʂʂʂ ;Δ͑Δͧϋʔτʂ೩͖͑ͭΔ΄Ͳώʔτʂʂ ɾopacity ɾtransform ɾcursor layout, paintΛͬ͢ඈ͹ͯ͠ composite layersʢϨΠϠʔ߹੒ʣ ͷΈΛߦ͏ɻ
30. ͱ͍͏͜ͱ͸
31. ͜Μͳ࣮૷͸ ύϑΥʔϚϯε͕͍͍Ͷʂ
32. opacityͰදࣔඇදࣔΛ੾Γସ͑ΔϝΨϝχϡʔ
33. transform: rotate()Ͱճసͤ͞ΔϋϯόʔΨʔϘλϯ
34. ಘΒΕͨ஌ݟ • Ξχϝʔγϣϯ͢ΔཁૉΛσβΠϯ͢Δࡍʹcolor΍ background-colorͰ͸ͳ͘ɺopacity΍transformͩ ͚ͰରԠͰ͖ͳ͍͔ݕ౼͢Δɻ • JSͰ.resize΍.scrollΛτϦΨʔʹͯ͠height΍ positionΛม͑Δ࣮૷ͳͲ͸ൃՐ੍ޚͱ࠶ඳըͷ྆໘ Ͱݫ͍͠ɻ
35. A11y || Accessibility
36. WebσβΠϯʹ͓͍ͯ ͳͥΞΫηγϏϦςΟ͕ ॏཁͳͷ͔ʁ
37. “ Webͷྗ͸ͦͷීวੑʹ͋Γ· ͢ɻো֐ͷ༗ແʹ͔͔ΘΒͣ୭΋͕ ΞΫηεͰ͖Δͱ͍͏ͷ͕Webͷ ຊ࣭తͳଆ໘ͳͷͰ͢ɻ” -- Tim Berners-Lee
38. ౦ژϝτϩʹֶͿ ΞΫηγϏϦςΟ
39. ౦ژϝτϩʹֶͿΞΫηγϏϦςΟ • શ໡Ͱ΋੾ූΛങ͑Δ఺ࣈ෇͖݊ചػ • ֎ࠃਓͰ΋ཧղͰ͖ΔଟݴޠҊ಺൘ • ंҜࢠͰ΋௨ΕΔվࡳ • ϕϏʔΧʔͰ΋ҠಈͰ͖ΔΤϨϕʔλʔ • ৭໡Ͱ΋ಡΈ΍͍͢࿏ઢਤ΍ిޫܝࣔ൘ ʢόϦΞϑϦʔɺϢχόʔαϧσβΠϯʣ
40. ౦ژϝτϩ࿏ઢγϯϘϧͷมભ
41. ౦ژϝτϩ࿏ઢγϯϘϧͷมભ
42. ౦ژϝτϩ࿏ઢγϯϘϧͷมભ
43. Web a11y
44. ྫ͑͹ϑΥʔϜ
45. ΦγϟϨͳϩάΠϯϑΥʔϜ ࡞Γ͍ͨʂ
46. ΦγϟϨͳϩάΠϯϑΥʔϜ ※ը૾͸ΠϝʔδͰ͢
47. ৭͚ͩͰvalidation?
48. ੺͍ถҹ͸ඞਢ߲໨ʁ
49. focus౰͍ͨͬͯΔͷ͕Θ͔Δʁ box-shadow΍outlineͰfocusΛදݱ͠Α͏
50. ͍͍ϑΥʔϜ͸͍͍ϚʔΫΞοϓ͔Β <label for=“some-id">໊͓લ </label> <span class="required">ඞਢ</span> <input type="text" placeholder="ࢁ ాଠ࿠" required>
51. ·ͱΊɿ͍͍ϑΥʔϜʹ͸… • ϥϕϧʹΑΔςΩετ৘ใ͕ਖ਼͍ͭͯ͘͠Δ • placeholderଐੑͷΈʹཔͬͯͳ͍ • ඞਢ߲໨Λ৭΍ه߸ͷΈͰද͞ͳ͍ • focus͕Ͳ͜ʹ౰͍ͨͬͯΔͷ͕෼͔Δ • ੏ͱ໊Λ෼͚ͳ͍
53. ϑΥʔϜҰͭͱͬͯ΋ɺ ৭ʑߟ͑ͯ࡞Δͷ͸೉͍͠ɻ
54. ͕ͦ͜WebσβΠφʔͷ ࿹ͷݟͤॴ΍Μ͔ʂ
55. ಘΒΕͨ஌ݟ • ৭૬͚ͩͰ͸ͳ͘ɺ࠼౓΍໌౓ʹ΋ࠩΛ͚ͭΔͱ ࢹೝ͠΍͘͢ͳΔ • WCAGΨΠυϥΠϯʹΑΔ๬·͍͠എܠͱςΩε τͷίϯτϥετࠩ͸4.5 : 1 • ੺͸ඞਢ?ԫ৭͸஫ҙ?ϐϯΫ͸ঁੑ?ͦͷίϯςΩ ετ͸ڞ༗͞Ε͍ͯΔ?৭͚ͩͰ৘ใΛද͞ͳ͍ • :hover͚ͩͰͳ͘ɺ:focusͷσβΠϯ΋๨Εͣʹ
56. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠