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
790
Code Colors!
デ部会「第5回 色にまつわるデザインのお話」
2017年7月26日(水)
hibikikudo
July 26, 2017
Tweet
Share
More Decks by hibikikudo
See All by hibikikudo
HTMLとブラウザの進化を踏まえたwebフロントエンド実装
hibikikudo
0
190
写真をWebで表示させよう
hibikikudo
0
4.1k
Other Decks in Design
See All in Design
mento Design Team Portfolio
mento0fficial
1
920
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
150
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
280
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.3k
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
420
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
4.1k
kintone Style Book
kintone
0
250
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
650
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
920
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
210
portfolio.pdf
onof003
0
200
アクセシビリティに取り組むメリット
magi1125
2
270
Featured
See All Featured
Balancing Empowerment & Direction
lara
5
700
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
RailsConf 2023
tenderlove
30
1.3k
Navigating Team Friction
lara
190
15k
Being A Developer After 40
akosma
91
590k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Code Review Best Practice
trishagee
72
19k
Building Applications with DynamoDB
mza
96
6.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Become a Pro
speakerdeck
PRO
29
5.6k
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ͷσβΠϯΕͣʹ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠