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.5k
2023 CSS
2023年に使えるようになったCSSでレイアウトや表現について紹介します。
にしはら
September 20, 2023
Tweet
Share
More Decks by にしはら
See All by にしはら
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
440
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.2k
vue_component_from_composable
nishiharatsubasa
2
570
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.1k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
6.9k
Other Decks in Technology
See All in Technology
EMConf JP の楽しみ方 / How to enjoy EMConf JP
pauli
2
120
comilioとCloudflare、そして未来へと向けて
oliver_diary
5
380
AWS re:Invent 2024 ふりかえり勉強会
yhana
0
710
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
3
1.7k
デジタルアイデンティティ人材育成推進ワーキンググループ 翻訳サブワーキンググループ 活動報告 / 20250114-OIDF-J-EduWG-TranslationSWG
oidfj
0
340
Azureの開発で辛いところ
re3turn
0
220
embedパッケージを深掘りする / Deep Dive into embed Package in Go
task4233
0
100
Amazon Q Developerで.NET Frameworkプロジェクトをモダナイズしてみた
kenichirokimura
1
160
実践! ソフトウェアエンジニアリングの価値の計測 ── Effort、Output、Outcome、Impact
nomuson
0
1.8k
ソフトウェア開発における「パーフェクトな意思決定」/Perfect Decision-Making in Software Development
yayoi_dd
2
2.7k
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
12k
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
2.1k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Six Lessons from altMBA
skipperchong
27
3.5k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Done Done
chrislema
182
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Adopting Sorbet at Scale
ufuk
74
9.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2.1k
Side Projects
sachag
452
42k
How to Ace a Technical Interview
jacobian
276
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
950
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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/