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
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
560
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
510
Goodpatch Tour💙 / We are hiring!
goodpatch
31
900k
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
190
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
1
890
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
DESIGNEAST 2025 A-3
_kotobuki_
0
100
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
150
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
540
佐藤千晶|ポートフォリオ
chimi_chia
0
180
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
730
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
380
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
What's in a price? How to price your products and services
michaelherold
246
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
BBQ
matthewcrist
89
9.8k
Making Projects Easy
brettharned
120
6.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Become a Pro
speakerdeck
PRO
29
5.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
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ͷσβΠϯΕͣʹ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠