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
実はすごいスピードで進化しているCSS
Search
Hayato Yokoyama
May 31, 2025
Programming
0
120
実はすごいスピードで進化しているCSS
Hayato Yokoyama
May 31, 2025
Tweet
Share
More Decks by Hayato Yokoyama
See All by Hayato Yokoyama
Next.js AppRouter × GraphQL 〜 夢見た理想と現実の課題 〜
hayato_yokoyama
0
130
フロントエンドテストを書きやすくするために工夫したこと
hayato_yokoyama
1
77
Other Decks in Programming
See All in Programming
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
450
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
9.4k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
290
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
4
790
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Porting a visionOS App to Android XR
akkeylab
0
440
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
300
Is Xcode slowly dying out in 2025?
uetyo
1
260
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
240
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
270
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
180
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Why Our Code Smells
bkeepers
PRO
336
57k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Statistics for Hackers
jakevdp
799
220k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Designing for Performance
lara
610
69k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Transcript
実はすごいスピードで進化している CSS 2025/05/30 横山 隼 Meguro.css #12
自己紹介 • ディップ株式会社(2022年新卒) • フロントエンドメインに WEBやスマホアプリの開発 横山 隼
None
None
None
None
None
いろいろ取り組んでいる会社
フロントエンドの情報共有が少ない気がした
会社で「CSSで今こんなことできます!!! 」をLTした
社内LTと同じ温度感でやるのも違うので...
実はすごいスピードで進化している CSS 2025/05/30 ディップ株式会社 横山 隼 Meguro.css #12
実はすごいスピードで進化している CSS すごいスピードで進化している CSSについて スペシャリストの皆さんにお伺いしたい 2025/05/30 ディップ株式会社 横山 隼 Meguro.css
#12
こんなノリで聞いてください
View Transition API
ご存知の方
使っている方
ぶつ切りな WEBサイトのUI/UX • スマホアプリだと「滑らかに切り替わる」 • WEBだと「パッと切り替わる」 • WEBでスマホアプリみたいな 滑らかさを表現するのは結構難しい
View Transitionの登場 • View Transition API で 簡単に「スッ」と動かせるようになった • Reactからも実験的機能で<ViewTransition>
API が登場
None
Experimental & Firefox がまだ未サポート https://developer.mozilla.org/ja/docs/Web/API/ViewTransition
コンテナクエリ
ご存知の方
使っている方
レスポンシブのこれまで レスポンシブデザインといえば、 「画面の幅が◯ px以下なら、こう表示する 」 → メディアクエリ(@media) @media screen and
(width: 600px) { body { color: red; } }
コンポーネント単位で考えるレスポンシブ • Container Queries(コンテナクエリ) 登場 • コンポーネントが置かれている親要素のサイズを見て、スタイルを適用 • レスポンシブを「画面単位」ではなく「コンポーネント単位」 で考える
@container (min-width: 700px) { .card h2 { font-size: 2em; } }
全ブラウザ対応🚀 https://caniuse.com/css-container-queries
まだまだ進化している
ダークモード対応
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
light-dark() • light-dark() 関数で 1行でライト/ダークを切り替えることもできる body { background-color: light-dark(#efedea, #223a2c);
}
light-dark() も全ブラウザ対応 https://developer.mozilla.org/ja/docs/Web/CSS/color_value/light-dark
CSS Nesting
Sass いらずでネストできる CSS Nesting • もうネイティブCSSでネストしてかける • ネストするためのSassはもういらない a {
&:hover { background-color: #eee; } &:focus { outline: 3px solid #06c; } }
全ブラウザ対応🚀 https://caniuse.com/css-nesting
Scoped Styles
CSSにスコープをつけられる @scope • CSSはグローバルで競合してしまう 問題があった → スケールしたときにバグの温床になる • 競合を回避する様々なアプローチが誕生 ◦
BEM, CSS Modules, Tailwind CSS, CSS in JS, Sass など • クラス名の衝突を気にせずにシンプルな命名が可能に @scope (.card) { p { color: red; } }
Firefoxがまだ未サポート https://developer.mozilla.org/ja/docs/Web/CSS/@scope
oklch / color-mix()
色指定の幅が広がる 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);
全ブラウザ対応🚀 https://caniuse.com/mdn-css_types_color_oklch https://caniuse.com/mdn-css_types_color_color-mix
他にもいっぱい
まとめ • キャッチアップ漏れがちですが、地味にCSSも進化が速い • すでに使っていた機能、使ってみようと思った機能、驚いた機能など ぜひご感想やフィードバックをいただけると幸いです • CSSでこんなことできるぜ って広めて最高のサイトを作っていきましょう
ご清聴、ありがとうございました 🍡
引用 • ディップ株式会社はPHPerKaigi 2025にゴールドスポンサーで参加します! • go-json/optパッケージを公開しました • レガシーシステムにNew Relicを入れて改善を頑張った話 •
ディップで進める!データセンター卒業プロジェクト