実はすごいスピードで進化しているCSS

Transcript

1. 実はすごいスピードで進化している CSS 2025/05/30 横山 隼 Meguro.css #12
2. 自己紹介 • ディップ株式会社（2022年新卒） • フロントエンドメインに WEBやスマホアプリの開発 横山 隼
8. いろいろ取り組んでいる会社
9. フロントエンドの情報共有が少ない気がした
10. 会社で「CSSで今こんなことできます！！！ 」をLTした
11. 社内LTと同じ温度感でやるのも違うので...
12. 実はすごいスピードで進化している CSS 2025/05/30 ディップ株式会社 横山 隼 Meguro.css #12
13. 実はすごいスピードで進化している CSS すごいスピードで進化している CSSについて スペシャリストの皆さんにお伺いしたい 2025/05/30 ディップ株式会社 横山 隼 Meguro.css #12
14. こんなノリで聞いてください 󰢛
15. View Transition API
16. ご存知の方 󰢧
17. 使っている方 󰢧
18. ぶつ切りな WEBサイトのUI/UX • スマホアプリだと「滑らかに切り替わる」 • WEBだと「パッと切り替わる」 • WEBでスマホアプリみたいな 滑らかさを表現するのは結構難しい
19. View Transitionの登場 • View Transition API で 簡単に「スッ」と動かせるようになった • Reactからも実験的機能で<ViewTransition> API が登場
21. Experimental & Firefox がまだ未サポート https://developer.mozilla.org/ja/docs/Web/API/ViewTransition
22. コンテナクエリ
23. ご存知の方 󰢧
24. 使っている方 󰢧
25. レスポンシブのこれまで レスポンシブデザインといえば、 「画面の幅が◯ px以下なら、こう表示する 」 → メディアクエリ（@media） @media screen and (width: 600px) { body { color: red; } }
26. コンポーネント単位で考えるレスポンシブ • Container Queries（コンテナクエリ） 登場 • コンポーネントが置かれている親要素のサイズを見て、スタイルを適用 • レスポンシブを「画面単位」ではなく「コンポーネント単位」 で考える @container (min-width: 700px) { .card h2 { font-size: 2em; } }
27. 全ブラウザ対応🚀 https://caniuse.com/css-container-queries
28. まだまだ進化している
29. ダークモード対応
30. prefers-color-scheme • prefers-color-scheme で OS設定のライト/ダークに 連動して、切り替えられる • 2020年1月から 全ブラウザ利用可能 body { background-color: #efedea; } /* ダークモードのときのみ適用 */ @media (prefers-color-scheme: dark) { body { background-color: #223a2c; } } https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
31. light-dark() • light-dark() 関数で 1行でライト/ダークを切り替えることもできる body { background-color: light-dark(#efedea, #223a2c); }
32. light-dark() も全ブラウザ対応 https://developer.mozilla.org/ja/docs/Web/CSS/color_value/light-dark
33. CSS Nesting
34. Sass いらずでネストできる CSS Nesting • もうネイティブCSSでネストしてかける • ネストするためのSassはもういらない a { &:hover { background-color: #eee; } &:focus { outline: 3px solid #06c; } }
35. 全ブラウザ対応🚀 https://caniuse.com/css-nesting
36. Scoped Styles
37. CSSにスコープをつけられる @scope • CSSはグローバルで競合してしまう 問題があった → スケールしたときにバグの温床になる • 競合を回避する様々なアプローチが誕生 ◦ BEM, CSS Modules, Tailwind CSS, CSS in JS, Sass など • クラス名の衝突を気にせずにシンプルな命名が可能に @scope (.card) { p { color: red; } }
38. Firefoxがまだ未サポート https://developer.mozilla.org/ja/docs/Web/CSS/@scope
39. oklch / color-mix()
40. 色指定の幅が広がる oklch / color-mix() • RGB(rgb(0,0,0))や16進数カラーコード(#000000) だけじゃない • より直感的に操作できる oklch ◦ okL → 明るさ（Lightness）、C → 彩度（Chroma）、H → 色相（Hue） • 色を混ぜる color-mix() oklch(40.1% 0.123 21.57) color-mix(in lch, plum 40%, pink);
41. 全ブラウザ対応🚀 https://caniuse.com/mdn-css_types_color_oklch https://caniuse.com/mdn-css_types_color_color-mix
42. 他にもいっぱい
43. まとめ • キャッチアップ漏れがちですが、地味にCSSも進化が速い • すでに使っていた機能、使ってみようと思った機能、驚いた機能など ぜひご感想やフィードバックをいただけると幸いです • CSSでこんなことできるぜ って広めて最高のサイトを作っていきましょう
44. ご清聴、ありがとうございました 🍡
45. 引用 • ディップ株式会社はPHPerKaigi 2025にゴールドスポンサーで参加します！ • go-json/optパッケージを公開しました • レガシーシステムにNew Relicを入れて改善を頑張った話 • ディップで進める！データセンター卒業プロジェクト