Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2023 CSS

Avatar for にしはら にしはら
September 20, 2023
Technology
4.9k
7

2023 CSS

2023年に使えるようになったCSSでレイアウトや表現について紹介します。

Avatar for にしはら

にしはら

September 20, 2023

More Decks by にしはら

See All by にしはら
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
Avatar for にしはら nishiharatsubasa
3
6.5k
速くて安いWebサイトを作る
Avatar for にしはら nishiharatsubasa
21
19k
スーパーマリオRPGのリメイク版の変更点からみるUX
Avatar for にしはら nishiharatsubasa
1
1.1k
defineModelを使って気軽にコンポーネントのv-modelをやろう
Avatar for にしはら nishiharatsubasa
3
1.7k
vue_component_from_composable
Avatar for にしはら nishiharatsubasa
2
750
エルデンリングに学ぶ道に迷わないUIと世界観
Avatar for にしはら nishiharatsubasa
0
1.6k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
Avatar for にしはら nishiharatsubasa
2
7.4k

Other Decks in Technology

See All in Technology
35分でわかるEffective Platform Engineering
Avatar for nwiizo nwiizo
5
610
平文パスワードはログに“残り” ── 肝心の侵入は“痕跡すら残らない”
Avatar for kuroneko kuroneko13
0
120
強化学習「理論」入門
Avatar for Etsuji Nakai enakai00
3
3.6k
AI・HPC開発を支えるGPU環境の新しい選択肢 液冷GPUシステム「AquSys」の取り組み
Avatar for GPU UNITE gpuunite_official
0
230
tamachi.go 誕生の裏側
Avatar for ryoji miyamoto rymiyamoto
1
200
:syncing_time:
Avatar for sksat sksat
2
510
コネクションをピン留めさせずに SELECTクエリのタイムアウトを設定した話
Avatar for コドモン開発チーム codmoninc
0
210
FDEの心得
Avatar for Noriaki Oji noriakioji
5
6.4k
Flutter × BLE Centralを自前Pluginで実装する設計パターン - MethodChannel / EventChannelで作る双方向ブリッジの実践 / Building Custom Flutter BLE Central Plugins: Bidirectional Bridging with Method & Event Channels
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
240
ハッカソンで入賞した話 @ Findy LT
Avatar for asari asari194617
0
1.5k
Adding Right-to-Left support to your web
application with CSS logical properties — Lessons from Redmine
Avatar for MAEDA Go vividtone
0
170
Oracle MCP Servers Explained
Avatar for thatjeffsmith thatjeffsmith
0
420

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
550
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.4k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
470
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
480
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.2k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
800
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.9k

Transcript

  1. 2023೥ʹ࢖͑ΔΑ͏ʹͳͬͨCSS ʙ৽͍͠Ξχϝʔγϣϯ΍ϨΠΞ΢τख๏ʙ

  2. ੢ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayfisher_zari @t.nishihara710 @crayfisher-zari.bsky.social

  3. ීஈ͸͜ΜͳهࣄΛॻ͍͍ͯ·͢ ಠཱͨ͠CSS translateɾrotateɾscale ϓϩύςΟ͔ͩΒͰ͖Δɺ ๛͔ͳΞχϝʔγϣϯςΫχοΫʂ ҙ֎ͱԞਂ͍CSSͷfont-weightͷ࿩ https://ics.media/entry/230830/ https://ics.media/entry/230309/ NEW !

  4. ࠷ۙ࢖͑ΔΑ͏ʹͳͬͨCSS ɾίϯςφΫΤϦ ɾ:has() ٙࣅΫϥε ɾࡾ֯ؔ਺ ɾಠཱͨ͠ transform ϓϩύςΟ ɾεΫϩʔϧۦಈΞχϝʔγϣϯ ɾίϯςφΫΤϦ΍

    has() Λ࢖ͬͨɺμογϡϘʔυը໘ ɾεΫϩʔϧۦಈΞχϝʔγϣϯΛ࢖ͬͨσʔλϏδϡΞϥΠθʔγϣϯ Ͱ͖ΔΑ͏ʹͳͬͨϨΠΞ΢τ΍৽͍͠දݱྫ

  5. ίϯςφΫΤϦ

  6. ίϯςφΫΤϦͱ͸ ...ʁ ਌ཁૉͷ෯ʹԠͨ͡ CSSͷग़͠෼͚͕Մೳ ϝσΟΞΫΤϦͷ਌ཁૉόʔδϣϯΈ͍ͨͳΠϝʔδ 2023೥2݄͔Β࢖༻Մೳ

  7. ϝσΟΞΫΤϦ͕ܭଌ͢Δ෯ ίϯςφΫΤϦ͕ܭଌ͢Δ෯ ϝσΟΞΫΤϦͱͷҧ͍

  8. ίϯςφΫΤϦͷϝϦοτ ஫ҙ఺ ίϯϙʔωϯτ୯ҐͷϨεϙϯγϒ͕΍Γ΍͘͢ͳΔ ਌ཁૉ͕ඞཁͳͷͰɺHTMLઃܭʹ޻෉͕ඞཁ

  9. :has() ٙࣅΫϥε

  10. :has() ٙࣅΫϥεͱ͸ ...ʁ ಛఆͷࢠཁૉΛ΋ͬͨ ηϨΫλʔ͕Մೳ ࢠཁૉʹԠͨ͡ηϨΫλʔ͸ըظత FirefoxҎ֎Ͱ࢖༻Մೳ

  11. :has() ٙࣅΫϥεͷϝϦοτ ࢠཁૉͷঢ়ଶʹԠͨ͡਌ཁૉͷελΠϧมߋ͕Մೳ ˠಈతͳঢ়ଶมߋʹରͯ͠ॊೈʹରԠͰ͖Δ ʂ

  12. ࡾ֯ؔ਺

  13. CSSͷࡾ֯ؔ਺ͱ͸ ...ʁ ࡾ֯ؔ਺Λ͔ͭͬͨ ஋ͷࢦఆ͕Մೳ 2023೥3݄͔Β࢖༻Մೳ ΈΜͳͷτϥ΢Ϛ sin, cos, tan asin,

    acos, atan ͕࢖༻Մೳ

  14. ࡾ֯ؔ਺͸ԁʹؔ͢Δ࠲ඪ͕ಘҙ transform: translate( calc(cos(30deg) * var(--r)), calc(sin(0deg) * var(--r)) );

    30deg r cos(30deg) ʷ r sin(30deg) ʷ r x = y ΢Σϒͷ৔߹ɺԼ޲͖͕ y ࠲ඪͷਖ਼ํ޲ʹͳΔͷͰ ਺ֶͱҧ͏ͷͰগ͠஫ҙ

  15. CSSࡾ֯ؔ਺ͷϝϦοτ ֯౓Λར༻ͨ͠ࢦఆ͕ՄೳʹͳΔ ԁܗͷϨΠΞ΢τ͕΍Γ΍͘͢ͳΔ ༨ஊ ؒ઀తʹ˽ 2 ΍КͷΑ͏ͳ਺ΛCSSͰѻ͑ΔΑ͏ʹͳͬͨ ˠCSSม਺ʹԫۚൺ΍നۜൺͷΑ͏ͳ஋Λࢉग़Ͱ͖Δ

  16. ಠཱͨ͠transformϓϩύςΟ

  17. ಠཱͨ͠transformϓϩύςΟͱ͸ ...ʁ translate, rotate, scale ͕ ಠཱͨ͠ϓϩύςΟͱͯ͠࢖༻Մೳ skew() ͸ಠཱͤͣ 2022

    ೥8݄͔Β࢖༻Մೳ

  18. ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯ transform: translate transform: rotate ैདྷ͸2ͭཁૉ͕ඞཁ

  19. ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯ translate rotate ͜Ε͔Β͸1ͭཁૉͰՄೳ

  20. ಠཱͨ͠transformϓϩύςΟͷϝϦοτ ෳࡶͳΞχϝʔγϣϯ΋هड़͠΍͘͢ͳΓɺ Πʔδϯάͷௐ੔΋ಠཱͯ͠ௐ੔Ͱ͖Δ

  21. εΫϩʔϧۦಈΞχϝʔγϣϯ

  22. εΫϩʔϧۦಈΞχϝʔγϣϯͱ͸ ...ʁ εΫϩʔϧྔʹԠͨ͡ ஈ֊తͳΞχϝʔγϣϯ͕Մೳ ࠓ·ͰJavaScript ͕ඞཁͩͬͨΑ͏ͳදݱ΋Ͱ͖Δʂ ChromeɺEdgeͷΈ࢖༻Մೳ

  23. εΫϩʔϧۦಈΞχϝʔγϣϯͷϝϦοτ ύϥϥοΫεͷΑ͏ͳදݱ΋CSSͷΈͰՄೳ ޻෉࣍ୈͰ͍Ζ͍Ζͳදݱ͕Ͱ͖Δ ஫ҙ఺ ಛఆ஍఺·Ͱ͖ͨΒΞχϝʔγϣϯΛ࣮ߦ͢ΔΑ͏ͳ ൃՐܕͷ΋ͷ͸Ͱ͖ͳ͍

  24. ࣮૷ྫ

  25. ίϯςφΫΤϦͱ :has() ٙࣅΫϥε https://ics-creative.github.io/pwa_night_vol55/container_query/

  26. ࡾ֯ؔ਺ͱಠཱͨ͠ transformϓϩύςΟ https://ics-creative.github.io/pwa_night_vol55/container_query/

  27. εΫϩʔϧۦಈΞχϝʔγϣϯ https://ics-creative.github.io/pwa_night_vol55/scroll_driven/

  28. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ICS Ͱ͸ϑϩϯτΤϯυΤϯδχΞΛืूத https://ics-web.jp/recruit/

  29. ࢀߟจݙ 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/