Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
420
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.2k
vue_component_from_composable
nishiharatsubasa
2
560
エルデンリングに学ぶ道に迷わない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
店舗向けSaaSにおける 顧客要望活用の実践アプローチ(20241205_pmconf)
yujirooo
0
3.3k
ファインディの4年にわたる技術的負債の返済 / Repaying 4 Years of Technical Debt at Findy
ma3tk
7
3.8k
12/3(火)のBedrockアプデ速報(re:Invent 2024 Daily re:Cap #2 with AWS Heroes)
minorun365
PRO
4
140
PostgreSQL Conference Japan 2024 A4 Comparison of column-oriented access methods
nori_shinoda
0
150
新機能Amazon GuardDuty Extended Threat Detectionはネ申って話
cmusudakeisuke
0
160
A/Aテストにおけるサンプルサイズ/japanr2024
nikkei_engineer_recruiting
1
610
多様なロール経験が導いたエンジニアキャリアのナビゲーション
coconala_engineer
1
160
My Generation 年配者がこの先生きのこるには (Developers CAREER Boost 2024 Edition)/My Generation How elder engineers can survive
kwappa
3
370
プロダクトマネージャーは 事業責任者の夢をみるのか pmconf2024
gimupop
2
8.9k
Raspberry Pi 秋の新製品をチェックしてみよう / 20231202-rpi-jam-tokyo
akkiesoft
0
470
セキュリティ系アップデート全体像と AWS Organizations 新ポリシー「宣言型ポリシー」を紹介 / reGrowth 2024 Security
masahirokawahara
0
170
突き破って学ぶコンテナセキュリティ/container-breakout-cncj-lt
mochizuki875
6
1.1k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Making the Leap to Tech Lead
cromwellryan
133
9k
A Tale of Four Properties
chriscoyier
157
23k
A Modern Web Designer's Workflow
chriscoyier
693
190k
A Philosophy of Restraint
colly
203
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Building Your Own Lightsaber
phodgson
103
6.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
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/