「え？！それ今ではCSSだけでできるの！？」驚きの進化を遂げたモダンCSS

このスライドはSlidevで作られており、以下のレポジトリで公開しています
https://github.com/riya-amemiya/amemiya_riya_slide_data/tree/main/frontend_conf_hokkaido_2025

Transcript

1. 「え？！それ今ではCSS だけでできるの！？」 驚きの進化を遂げたモダンCSS
2. 自己紹介 名前：西 悠太 所属：株式会社ダイニー TypeScript が好きです
3. 今日のゴール 「へー！今のCSS ってそんなことできるんだー」 と思って帰ってもらう
4. ちょっと質問です 🙋 以下の機能、どうやって実装しますか？ 親要素のサイズに応じてレイアウトを変える フォームの入力状態に応じて親要素のスタイルを変更 スクロールに連動したプログレスバー ポップアップやツールチップ
5. 今こう思ってませんか？ めんどくさい処理だなぁ… JavaScript でしかできないなぁ… まさかCSS でできるの？！
6. 実は… 全部CSS だけでできます 2019-2025 年でCSS は劇的に進化しました 今日は「昔はJavaScript 必須だったけど、 今はCSS だけでできる」機能を紹介します ( ＊一部ブラウザAPI やHTML との連携を含む＊)
7. 1. レスポンシブデザインの新常識 Container Queries （コンテナクエリ）
8. こんな経験ありませんか？ サイドバーとメインエリアで同じカードコンポーネントを使いたい サイズによって横並び、縦並びを出し分けたい… でも… サイドバーは幅300px メインエリアは幅800px 同じブレークポイントじゃ対応できない！ メディアクエリは画面全体のサイズしか見れないから、 配置場所によって異なるレイアウトが必要な時に困 る…
9. 従来の解決方法：JavaScript ResizeObserver で親要素のサイズを監視して クラスを付け替える… でもこれって： パフォーマンスへの影響 複雑なイベント管理 CSS とJS の依存関係 もっとシンプルにできないの？ const resizeObserver = new ResizeObserver(entries => { entries.forEach(entry => { const width = entry.contentRect.width; entry.target.classList.toggle('small', width < 400); }); });
10. 今はCSS だけで解決 Container Queries ：親要素のサイズでスタイルを変える これだけ！ サイドバーでは縦並び、メインでは横並びなどが実現できる！ 場所に応じて自動的にレイアウトが変わる！ /* 親要素をコンテナとして定義 */ .card-container { container-type: inline-size; } /* コンテナのサイズに応じてスタイルを変更 */ @container (max-width: 400px) { .card { flex-direction: column; } }
11. 2. 親要素を操る魔法のセレクタ :has() セレクタ
12. フォームでこんな実装してませんか？ 「入力エラーがあるフィールドの親要素を赤く表示したい」 よくある要件ですよね？ でもCSS では子要素は選択できても 親要素は選択できなかった…
13. 従来の解決方法：JavaScript 入力が変わるたびに親要素を探してクラスを付ける 面倒だし、動的なフォームだと管理が大変… input.addEventListener('blur', () => { if (input.invalid) { input.closest('.form-group').classList.add('error'); } });
14. 今はCSS だけで解決 :has() セレクタ：子要素の状態で親を選択 入力が無効になった瞬間に自動的に反映！ JavaScript のイベント管理が不要に /* 無効な入力を含むフォームグループ */ .form-group:has(input:invalid) { border-left: 3px solid red; background: #ffebee; } /* チェックされたチェックボックスを含むラベル */ label:has(input:checked) { font-weight: bold; color: blue; }
15. 3. z-index 地獄からの解放 Popover API
16. モーダルやツールチップの実装で困ること z-index の値がどんどん大きくなっていく… どれが一番上に来るか分からない！ しかもフォーカス管理やESC キーの処理も必要… .dropdown { z-index: 100; } .modal { z-index: 1000; } .tooltip { z-index: 9999; } .super-modal { z-index: 999999; }
17. 従来の解決方法：JavaScript ライブラリを使うか、大量のコードを書く z-index の動的計算 フォーカストラップ キーボードイベント 外側クリックの検知 結果：Popper.js などに頼ることに
18. 今はHTML とCSS だけで解決 Popover API ：ネイティブなポップオーバー機能 <button popovertarget="menu"> 開く</button> <div id="menu" popover> <h3> メニュー</h3> <ul> <li> 項目1</li> <li> 項目2</li> </ul> </div>
19. 自動的に全て対応 自動的に： トップレイヤーに表示（z-index 不要） ESC で閉じる 外側クリックで閉じる フォーカス管理 JavaScript ゼロ行！ /* ポップオーバーのスタイリング */ [popover]:popover-open { animation: slideIn 0.2s; }
20. 4. 詳細度の戦争を終わらせる @layer （カスケードレイヤー）
21. CSS あるある：詳細度の戦い 外部ライブラリのスタイルを上書きしたい時… !important 地獄の始まり… /* ライブラリ */ .btn-primary { background: blue; } /* 上書きしたい... */ .my-component .btn-primary { } /* 詳細度を上げる */ body .my-component .btn-primary { } /* もっと上げる */ .btn-primary { background: red !important; } /* 最終手段 */
22. 今はCSS だけで解決 @layer ：優先順位を明示的に制御 レイヤーの順番で優先度が決まる 詳細度の計算から解放される！ /* レイヤーの定義（左から右に優先度が上がる） */ @layer library, components, utilities; @layer library { .btn { background: blue; } } @layer components { .btn { background: red; } /* 詳細度が低くても勝つ！ */ }
23. 5. スタイルに境界線を引く @scope
24. グローバルCSS の永遠の課題 「このスタイル、どこまで影響するの？」 BEM やCSS Modules で名前空間を作ってきたけど… 長いクラス名 命名規則の学習コスト それでも完璧じゃない もっとシンプルに範囲を限定できないの？
25. 今はCSS だけで解決 @scope ：スタイルの適用範囲を限定 シンプルなクラス名でOK 範囲が明確で安心！ /* .article 内だけに適用 */ @scope (.article) { h2 { font-size: 2rem; } p { line-height: 1.8; } } /* .sidebar 内は完全に独立 */ @scope (.sidebar) { h2 { font-size: 1.2rem; } /* .article のh2 と競合しない！ */ }
26. @scope のインラインスタイル構文 HTML 内にインラインで@scope を書くことで、そのHTML 要素のみにスタイルを適用できます <section class="article-body"> <style> @scope { /* ここに書いたスタイルは、自動的にこの<style> タグの親要素 （この場合はsection.article-body ）だけに適用されます */ img { border: 5px solid black; background-color: goldenrod; } } </style> <!-- セクションの内容 --> </section>
27. 6. CSS Nesting Sass がいらなくなる日
28. ネストした構造を書きたい時 従来：Sass などのプリプロセッサが必要 ビルド環境の構築、package.json の設定… ちょっとしたプロジェクトには大げさすぎる
29. 今はCSS だけで解決 ネイティブCSS でネスト記法が可能に ビルド不要でネストが書ける！ .card { padding: 1rem; & .title { font-size: 1.5rem; &:hover { color: blue; } } }
30. 7. スクロール駆動アニメーション Scroll-driven Animations
31. スクロールに連動した演出 パララックス、進捗バー、要素の出現… 従来はscroll イベントでゴリゴリ計算 パフォーマンスの問題 スムーズさに欠ける 複雑な計算ロジック
32. 今はCSS だけで解決 animation-timeline: scroll() たったこれだけで、スクロールに連動したアニメーションが実現 /* スクロール進捗バー */ .progress-bar { animation: grow auto linear; animation-timeline: scroll(root); /* ページ全体のスクロール */ } @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
33. 8. 初期表示アニメーション @starting-style
34. display: none からのアニメーション問題 モーダルやアコーディオンを スムーズに表示したいけど… display: none からdisplay: block へは トランジションが効かない！ JavaScript で2 段階の処理が必要だった
35. 今はCSS だけで解決 @starting-style ：初期状態を定義 表示時に自動的にフェードイン！ dialog { opacity: 1; transition: opacity 0.3s; } /* 表示開始時の初期状態 */ @starting-style { dialog[open] { opacity: 0; } }
36. 9. 美しいテキスト折り返し text-wrap: balance
37. 見出しの最後の単語問題 「最後の単語だけ次の行になっちゃう… 」 デザイナーさんからよく指摘される問題 でも動的なテキストだと制御が難しい
38. 今はCSS だけで解決 text-wrap: balance ブラウザが自動的にバランスの良い改行位置を計算！ 文字を数えて複数の行にまたがるようにバランスをとるのはコンピューターに負荷がかかるため、この値は限られた行数（Chromium では 6 行以下、Firefox では 10 行以下）のテキストブロックにのみ対応しています。 h1, h2, h3 { text-wrap: balance; /* 自動で読みやすい幅に改行 */ }
39. 10. 自動ダークモード対応 light-dark() 関数
40. ダークモード対応の面倒さ 2 セットの色を管理して JavaScript で切り替え… メディアクエリで分岐したり クラスで切り替えたり 管理が煩雑に
41. 今はCSS だけで解決 light-dark() ：自動色切り替え OS の設定に自動追従！ :root { color-scheme: light dark; } /* light-dark( ライトモード, ダークモード) */ body { background: light-dark(white, #1a1a1a); color: light-dark(black, #e5e5e5); }
42. ちなみに 一般的にはすべきではないですが、 color-scheme を使って強制的にモードを切り替えることもできます。 :root { color-scheme: light; /* 強制的にライトモードにする */ }
43. 11. 自動リサイズフォーム field-sizing
44. テキストエリアの高さ調整 入力内容に応じて高さを変えたい 従来はJavaScript でscrollHeight を計算して調整…
45. 今はCSS だけで解決 field-sizing: content 入力に応じて自動的にリサイズ！ textarea { field-sizing: content; min-height: 3lh; /* 最小3 行分 */ max-height: 10lh; /* 最大10 行分 */ }
46. まとめ 最後に今回紹介した機能をまとめます レイアウト・レスポンシブ Container Queries - 親要素ベースのレスポンシブ :has() - 子要素の状態で親を選択 UI ・インタラクション Popover API - ネイティブなポップオーバー Scroll-driven Animations - スクロール連動アニメーション @starting-style - display:none からのアニメーション
47. スタイル管理 @layer - 詳細度の制御 @scope - スタイルの適用範囲 CSS Nesting - ネイティブなネスト記法 その他の便利機能 text-wrap: balance - 自動改行調整 light-dark() - 自動テーマ切り替え field-sizing - フォームの自動リサイズ この他にも様々な機能があり、CSS は進化し続けています。 ぜひ気になったら調べてみてください。
48. 注意 今回紹介した機能は、ブラウザの対応状況によってはまだ使用できない場合があります。 詳細は以下のページを参照してください。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Container_Queries https://developer.mozilla.org/ja/docs/Web/CSS/:has https://developer.mozilla.org/ja/docs/Web/API/Popover_API https://developer.mozilla.org/ja/docs/Web/CSS/@layer https://developer.mozilla.org/ja/docs/Web/CSS/@scope https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Nesting https://developer.mozilla.org/ja/docs/Web/CSS/CSS_scroll-driven_animations https://developer.mozilla.org/ja/docs/Web/CSS/@starting-style https://developer.mozilla.org/ja/docs/Web/CSS/text-wrap https://developer.mozilla.org/ja/docs/Web/CSS/color_value/light-dark https://developer.mozilla.org/ja/docs/Web/CSS/field-sizing
49. ご清聴ありがとうございました 本日のスライドは下記のリポジトリで公開しています。 内容の修正・改善など、お気軽にPull Request をお送りください。 9/21 の東京、11/30 の関西のフロントエンドカンファレンスでも登壇するので、そこでもお会いしましょう！ https://github.com/riya-amemiya/amemiya_riya_slide_data/tree/main/frontend_conf_hokkaido_2025 X やGitHub など: https://riya-amemiya-links.tokidux.com/ このスライドは CC BY-SA 4.0 でライセンスされています。 より自由な翻訳を可能にするため、翻訳は例外的に CC BY 4.0 での配布が許可されています。 Required Attribution: Riya Amemiya (https://github.com/riya-amemiya)