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
2023 CSS
Search
にしはら
September 20, 2023
Technology
7
4.6k
2023 CSS
2023年に使えるようになったCSSでレイアウトや表現について紹介します。
にしはら
September 20, 2023
Tweet
Share
More Decks by にしはら
See All by にしはら
速くて安いWebサイトを作る
nishiharatsubasa
17
16k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
680
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.3k
vue_component_from_composable
nishiharatsubasa
2
620
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.3k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
7k
Other Decks in Technology
See All in Technology
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.8k
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
480
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
310
生成AIでwebアプリケーションを作ってみた
tajimon
2
150
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
210
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
Welcome to the LLM Club
koic
0
170
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
100
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
310
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Code Reviewing Like a Champion
maltzj
524
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Thoughts on Productivity
jonyablonski
69
4.7k
How to train your dragon (web standard)
notwaldorf
93
6.1k
Fireside Chat
paigeccino
37
3.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
2023ʹ͑ΔΑ͏ʹͳͬͨCSS ʙ৽͍͠ΞχϝʔγϣϯϨΠΞτख๏ʙ
ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayfisher_zari @t.nishihara710 @crayfisher-zari.bsky.social
ීஈ͜ΜͳهࣄΛॻ͍͍ͯ·͢ ಠཱͨ͠CSS translateɾrotateɾscale ϓϩύςΟ͔ͩΒͰ͖Δɺ ๛͔ͳΞχϝʔγϣϯςΫχοΫʂ ҙ֎ͱԞਂ͍CSSͷfont-weightͷ https://ics.media/entry/230830/ https://ics.media/entry/230309/ NEW !
࠷ۙ͑ΔΑ͏ʹͳͬͨCSS ɾίϯςφΫΤϦ ɾ:has() ٙࣅΫϥε ɾࡾ֯ؔ ɾಠཱͨ͠ transform ϓϩύςΟ ɾεΫϩʔϧۦಈΞχϝʔγϣϯ ɾίϯςφΫΤϦ
has() ΛͬͨɺμογϡϘʔυը໘ ɾεΫϩʔϧۦಈΞχϝʔγϣϯΛͬͨσʔλϏδϡΞϥΠθʔγϣϯ Ͱ͖ΔΑ͏ʹͳͬͨϨΠΞτ৽͍͠දݱྫ
ίϯςφΫΤϦ
ίϯςφΫΤϦͱ ...ʁ ཁૉͷ෯ʹԠͨ͡ CSSͷग़͚͕͠Մೳ ϝσΟΞΫΤϦͷཁૉόʔδϣϯΈ͍ͨͳΠϝʔδ 20232݄͔Β༻Մೳ
ϝσΟΞΫΤϦ͕ܭଌ͢Δ෯ ίϯςφΫΤϦ͕ܭଌ͢Δ෯ ϝσΟΞΫΤϦͱͷҧ͍
ίϯςφΫΤϦͷϝϦοτ ҙ ίϯϙʔωϯτ୯ҐͷϨεϙϯγϒ͕Γ͘͢ͳΔ ཁૉ͕ඞཁͳͷͰɺHTMLઃܭʹ͕ඞཁ
:has() ٙࣅΫϥε
:has() ٙࣅΫϥεͱ ...ʁ ಛఆͷࢠཁૉΛͬͨ ηϨΫλʔ͕Մೳ ࢠཁૉʹԠͨ͡ηϨΫλʔըظత FirefoxҎ֎Ͱ༻Մೳ
:has() ٙࣅΫϥεͷϝϦοτ ࢠཁૉͷঢ়ଶʹԠͨ͡ཁૉͷελΠϧมߋ͕Մೳ ˠಈతͳঢ়ଶมߋʹରͯ͠ॊೈʹରԠͰ͖Δ ʂ
ࡾ֯ؔ
CSSͷࡾ֯ؔͱ ...ʁ ࡾ֯ؔΛ͔ͭͬͨ ͷࢦఆ͕Մೳ 20233݄͔Β༻Մೳ ΈΜͳͷτϥϚ sin, cos, tan asin,
acos, atan ͕༻Մೳ
ࡾ֯ؔԁʹؔ͢Δ࠲ඪ͕ಘҙ transform: translate( calc(cos(30deg) * var(--r)), calc(sin(0deg) * var(--r)) );
30deg r cos(30deg) ʷ r sin(30deg) ʷ r x = y Σϒͷ߹ɺԼ͖͕ y ࠲ඪͷਖ਼ํʹͳΔͷͰ ֶͱҧ͏ͷͰগ͠ҙ
CSSࡾ֯ؔͷϝϦοτ ֯Λར༻ͨ͠ࢦఆ͕ՄೳʹͳΔ ԁܗͷϨΠΞτ͕Γ͘͢ͳΔ ༨ஊ ؒతʹ˽ 2 КͷΑ͏ͳΛCSSͰѻ͑ΔΑ͏ʹͳͬͨ ˠCSSมʹԫۚൺനۜൺͷΑ͏ͳΛࢉग़Ͱ͖Δ
ಠཱͨ͠transformϓϩύςΟ
ಠཱͨ͠transformϓϩύςΟͱ ...ʁ translate, rotate, scale ͕ ಠཱͨ͠ϓϩύςΟͱͯ͠༻Մೳ skew() ಠཱͤͣ 2022
8݄͔Β༻Մೳ
ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯ transform: translate transform: rotate ैདྷ2ͭཁૉ͕ඞཁ
ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯ translate rotate ͜Ε͔Β1ͭཁૉͰՄೳ
ಠཱͨ͠transformϓϩύςΟͷϝϦοτ ෳࡶͳΞχϝʔγϣϯهड़͘͢͠ͳΓɺ Πʔδϯάͷௐಠཱͯ͠ௐͰ͖Δ
εΫϩʔϧۦಈΞχϝʔγϣϯ
εΫϩʔϧۦಈΞχϝʔγϣϯͱ ...ʁ εΫϩʔϧྔʹԠͨ͡ ஈ֊తͳΞχϝʔγϣϯ͕Մೳ ࠓ·ͰJavaScript ͕ඞཁͩͬͨΑ͏ͳදݱͰ͖Δʂ ChromeɺEdgeͷΈ༻Մೳ
εΫϩʔϧۦಈΞχϝʔγϣϯͷϝϦοτ ύϥϥοΫεͷΑ͏ͳදݱCSSͷΈͰՄೳ ࣍ୈͰ͍Ζ͍Ζͳදݱ͕Ͱ͖Δ ҙ ಛఆ·Ͱ͖ͨΒΞχϝʔγϣϯΛ࣮ߦ͢ΔΑ͏ͳ ൃՐܕͷͷͰ͖ͳ͍
࣮ྫ
ίϯςφΫΤϦͱ :has() ٙࣅΫϥε https://ics-creative.github.io/pwa_night_vol55/container_query/
ࡾ֯ؔͱಠཱͨ͠ transformϓϩύςΟ https://ics-creative.github.io/pwa_night_vol55/container_query/
εΫϩʔϧۦಈΞχϝʔγϣϯ https://ics-creative.github.io/pwa_night_vol55/scroll_driven/
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ICS ͰϑϩϯτΤϯυΤϯδχΞΛืूத https://ics-web.jp/recruit/
ࢀߟจݙ CSS͚ͩͰεΫϩʔϧΞχϝʔγϣϯ͕࡞ΕΔʂ ʁ ৽ٕज़ Scroll-driven Animations ͱ https://ics.media/entry/230718/ ಠཱͨ͠CSS translateɾrotateɾscaleϓϩύςΟ͔ͩΒͰ͖Δɺ๛͔ͳΞχϝʔγϣϯςΫχοΫʂ
https://ics.media/entry/230309/ CSSͷࡾ֯ؔΛཧղ͠Α͏ ʂ sin()ͱcos() ͰͰ͖Δදݱ https://ics.media/entry/230126/