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
780
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
Findyのプロデチームの 歩みとこれから
satty9556
0
260
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
380
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
730
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
170
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
510
Cyber Heart Online Book
hjnasby
0
180
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.3k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
430
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
7 Core Values of Round-L
wired888
0
1.7k
株式会社バクタム 会社説明資料
bactum
0
330
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fireside Chat
paigeccino
39
3.6k
Navigating Team Friction
lara
189
15k
Building an army of robots
kneath
306
46k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
A better future with KSS
kneath
239
17k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
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ͷσβΠϯΕͣʹ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠