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
株式会社バクタム 会社説明資料
bactum
0
240
UXデザインはなぜ定着しないのか?
designstudiopartners
0
730
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
150
Kid Cowboy 103
marilutwin
0
260
CMS管理画面のアクセシビリティ
magi1125
6
2k
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
330
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
410
The Golden Whitney
ohtristanart
PRO
0
530
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
190
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.1k
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.1k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
280
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Cult of Friendly URLs
andyhume
79
6.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
240
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
For a Future-Friendly Web
brad_frost
179
9.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
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ͷσβΠϯΕͣʹ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠