Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Code Colors!
Search
hibikikudo
July 26, 2017
Design
0
770
Code Colors!
デ部会「第5回 色にまつわるデザインのお話」
2017年7月26日(水)
hibikikudo
July 26, 2017
Tweet
Share
More Decks by hibikikudo
See All by hibikikudo
HTMLとブラウザの進化を踏まえたwebフロントエンド実装
hibikikudo
0
180
写真をWebで表示させよう
hibikikudo
0
4.1k
Other Decks in Design
See All in Design
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
670
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
290
harutaka Vision Deck
zenkigenforrecruit
0
140
CMS管理画面のアクセシビリティ
magi1125
6
2k
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
740
minpaku-community-scrum-patterns
norinity1103
1
120
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
250
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
130
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
440
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
610
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Gamification - CAS2011
davidbonilla
81
5.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
240
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Transcript
Code Colors! Hibiki kudo Iret .inc
qiita@hibikikudo
ࠓͷ֓ཁ • ৭Λѻ͏CSSϓϩύςΟͷ͓͞Β͍ͱɺ ͜Ε͔ΒͬͯΈ͍ͨ৽ϓϩύςΟ • Performance • A11y • ը૾ɺCanvasɺSVGɺWebGLʹ͍ͭͯ
ࠓճϊʔλονͰ͢
৭Λѻ͏CSSϓϩύςΟ ͓͞Β͍
৭Λѻ͏CSSϓϩύςΟ • color • background-color • background-image • border-color •
outline-color • box-shadow • text-shadow
CSSʹ͓͚Δ৭ͷࢦఆํ๏ • named-color • hex-color • rgb(a) • hsl(a)
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); }
͜ΕΒͷϓϩύςΟΛ Έ߹ΘͤΔͱ ͜Μͳ࡞ ࡞Ε·͢ɻ
CSS Flags http://pixelastic.github.io/css-flags/
5000ஹԁཉ͍͠!CSS https://codepen.io/VoQn/pen/jwjdOq
৭Λѻ͏CSSϓϩύςΟ • -webkit-scrollbar-track • -webkit-scrollbar-thumb ↑ εΫϩʔϧόʔΛσβΠϯͰ͖Δ
None
ͬͯΈ͍ͨ mix-blend-mode
mix-blend-modeͱ • ཁૉͷ༰ͱɺԼͷϨΠϠʔʹ͋Δཁૉͷ ༰ཁૉͷഎܠ৭ΛΛͲͷΑ͏ʹϒϨϯυ͢ Δ͔Λࣔ͠·͢ɻ • ཁPhotoshopͷඳըϞʔυ͕CSSͰ͑ Δʂ • Θ͔ͣ1ߦͷCSSͰ໘ന͍දݱ͕Ͱ͖Δ
None
None
CSS1ߦͰ࣮Ͱ͖Δ .hero-text{ mix-blend-mode: overlay; } .battery{ mix-blend-mode: difference; }
΄ͱΜͲͷϞμϯϒϥβ͕ରԠࡁΈʂ Internet Explorerಈ࡞Λఀࢭ͠·ͨ͠
None
Performance
CSSͷॻ͖ํͰ ύϑΥʔϚϯε มΘΔɻ
ಛʹΞχϝʔγϣϯͰ ॏཁɻ
None
ͦͦ ϒϥβͲͷΑ͏ʹ ৭ը૾Λඳը͍ͯ͠Δ͔
1. loading 3. rendering 2. scriping 4. painting
࠶ඳը(re-painting)ίετΛԼ͛ Δ͜ͱ͕ύϑΥʔϚϯεΛ্͛Δʂ ฒͯɹɹඳըͯ͠ɹϨΠϠʔΛ߹ ࠶ඳըίετΛߟ͑ͨCSSΛॻ͜͏
࠶ඳըίετ͕ߴ͘ɺϗόʔɺΫϦοΫɺ εΫϩʔϧʹ࿈ಈͨ͠ΞχϝʔγϣϯͰ͜ ΕΒΛ͏ͱύϑΥʔϚϯε͕down… ɾdisplay ɾposition ɾmargin ɾpadding ͜ΕΒͷϓϩύςΟ layout͔Β࢝·Δશͯͷ ࠶ඳըϓϩηε͕Ҿ͖ى͜͞ΕΔɻ
࠶ඳըίετɺύϑΥʔϚϯεී௨ɻ ɾcolor ɾbackground ɾtext-decoration ɾborder ͜ΕΒͷϓϩύςΟpaint͔Β ࠶ඳըϓϩηε͕ى͜͞ΕΔɻ
࠷ߴͷϋΠɾύϑΥʔϚϯεʂʂʂ ;Δ͑Δͧϋʔτʂ೩͖͑ͭΔ΄Ͳώʔτʂʂ ɾopacity ɾtransform ɾcursor layout, paintΛͬ͢ඈͯ͠ composite layersʢϨΠϠʔ߹ʣ ͷΈΛߦ͏ɻ
ͱ͍͏͜ͱ
͜Μͳ࣮ ύϑΥʔϚϯε͕͍͍Ͷʂ
opacityͰදࣔඇදࣔΛΓସ͑ΔϝΨϝχϡʔ
transform: rotate()Ͱճసͤ͞ΔϋϯόʔΨʔϘλϯ
ಘΒΕͨݟ • Ξχϝʔγϣϯ͢ΔཁૉΛσβΠϯ͢Δࡍʹcolor background-colorͰͳ͘ɺopacitytransformͩ ͚ͰରԠͰ͖ͳ͍͔ݕ౼͢Δɻ • JSͰ.resize.scrollΛτϦΨʔʹͯ͠height positionΛม͑Δ࣮ͳͲൃՐ੍ޚͱ࠶ඳըͷ྆໘ Ͱݫ͍͠ɻ
A11y || Accessibility
WebσβΠϯʹ͓͍ͯ ͳͥΞΫηγϏϦςΟ͕ ॏཁͳͷ͔ʁ
“ Webͷྗͦͷීวੑʹ͋Γ· ͢ɻোͷ༗ແʹ͔͔ΘΒͣ୭͕ ΞΫηεͰ͖Δͱ͍͏ͷ͕Webͷ ຊ࣭తͳଆ໘ͳͷͰ͢ɻ” -- Tim Berners-Lee
౦ژϝτϩʹֶͿ ΞΫηγϏϦςΟ
౦ژϝτϩʹֶͿΞΫηγϏϦςΟ • શͰූΛങ͑Δࣈ͖݊ചػ • ֎ࠃਓͰཧղͰ͖ΔଟݴޠҊ൘ • ंҜࢠͰ௨ΕΔվࡳ • ϕϏʔΧʔͰҠಈͰ͖ΔΤϨϕʔλʔ •
৭ͰಡΈ͍͢࿏ઢਤిޫܝࣔ൘ ʢόϦΞϑϦʔɺϢχόʔαϧσβΠϯʣ
౦ژϝτϩ࿏ઢγϯϘϧͷมભ
౦ژϝτϩ࿏ઢγϯϘϧͷมભ
౦ژϝτϩ࿏ઢγϯϘϧͷมભ
Web a11y
ྫ͑ϑΥʔϜ
ΦγϟϨͳϩάΠϯϑΥʔϜ ࡞Γ͍ͨʂ
ΦγϟϨͳϩάΠϯϑΥʔϜ ※ը૾ΠϝʔδͰ͢
৭͚ͩͰvalidation?
͍ถҹඞਢ߲ʁ
focus͍ͨͬͯΔͷ͕Θ͔Δʁ box-shadowoutlineͰfocusΛදݱ͠Α͏
͍͍ϑΥʔϜ͍͍ϚʔΫΞοϓ͔Β <label for=“some-id">໊͓લ </label> <span class="required">ඞਢ</span> <input type="text" placeholder="ࢁ ాଠ"
required>
·ͱΊɿ͍͍ϑΥʔϜʹ… • ϥϕϧʹΑΔςΩετใ͕ਖ਼͍ͭͯ͘͠Δ • placeholderଐੑͷΈʹཔͬͯͳ͍ • ඞਢ߲Λ৭ه߸ͷΈͰද͞ͳ͍ • focus͕Ͳ͜ʹ͍ͨͬͯΔͷ͕͔Δ •
ͱ໊Λ͚ͳ͍
None
ϑΥʔϜҰͭͱͬͯɺ ৭ʑߟ͑ͯ࡞Δͷ͍͠ɻ
͕ͦ͜WebσβΠφʔͷ ͷݟͤॴΜ͔ʂ
ಘΒΕͨݟ • ৭૬͚ͩͰͳ͘ɺ࠼໌ʹࠩΛ͚ͭΔͱ ࢹೝ͘͢͠ͳΔ • WCAGΨΠυϥΠϯʹΑΔ·͍͠എܠͱςΩε τͷίϯτϥετࠩ4.5 : 1 •
ඞਢ?ԫ৭ҙ?ϐϯΫঁੑ?ͦͷίϯςΩ ετڞ༗͞Ε͍ͯΔ?৭͚ͩͰใΛද͞ͳ͍ • :hover͚ͩͰͳ͘ɺ:focusͷσβΠϯΕͣʹ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠