CSS3 アドバンストのトレーニングコース

1. モダンなCSSとCSSの進化

• CSS3からモダンなCSSへ
• 現在のCSS標準とブラウザ実装
• CSS仕様とブラウザサポートの理解
• プログレッシブ・エンハンスメント
• 機能検出とグラシフル・デグラデーション
• モダンなCSSエコシステムの理解

2. 高度なセレクタ

• 高度な属性セレクタ
• 構造的擬似クラス
• :is()
• :where()
• :not()
• :has() と関係セレクタ
• セレクタの重要度
• 大規模プロジェクトにおける重要度の管理
• モダンなセレクタのベストプラクティス

3. モダンなカラーとビジュアルエフェクト

• RGB、HSL、およびモダンなカラー関数
• color()、lab()、lch()、oklab()、および oklch()
• 相対カラー
• 透明度とアルファチャンネル
• 高度なグラデーション
• リニア、ラディアル、およびコンイックグラデーション
• color-mix()
• カラー補間
• CSSフィルターとビジュアルエフェクト
• モダンなテーマリングとカラーシステム

4. CSSカスタムプロパティとデザインシステム

• CSS変数 / カスタムプロパティ
• 変数とフォールバック値
• ダイナミックテーマリング
• コンポーネントレベルのカスタマイズ
• CSSによるデザイントークン
• ライトテーマとダークテーマの作成
• var()、@property、および型付きカスタムプロパティの使用
• 保守可能なCSSデザインシステムの構築

5. CSSネストとカスケード管理

• ネイティブCSSネスト
• ネスト構文とベストプラクティス
• CSSネストとプリプロセッサーの比較
• カスケードと継承
• @layer によるカスケードレイヤー
• サードパーティCSSの管理
• @scope とスコープ付きスタイリングの概念
• 予測可能なCSSアーキテクチャの構築

6. Flexboxによる高度なレイアウト

• Flexbox基礎の復習
• メイン軸と交差軸
• 高度な整列
• フレキシブルなサイズ指定
• gap
• ラップと順序付け
• ネストしたFlexboxレイアウト
• 一般的なFlexboxパターン
• Flexboxを使用したレスポンシブコンポーネント

7. 高度なCSS Grid

• Grid基礎の復習
• 明示的グリッドと暗黙的グリッド
• 高度なトラックサイズ指定
• minmax()
• auto-fit と auto-fill
• min()、max()、および clamp()
• グリッドエリア
• レスポンシブGridレイアウト
• 複雑なページレイアウト
• CSS Subgrid
• Subgridによる整列コンポーネントレイアウトの使用

8. コンテナクエリとコンポーネントベースのレスポンシブ性

• ビューポートメディアクエリだけでは十分でない理由
• コンテナクエリの概念
• container-type
• @container
• コンテナクエリ長単位
• コンポーネント駆動型レスポンシブデザイン
• コンテナクエリスタイルクエリ
• 再利用可能なレスポンシブコンポーネントの設計
• コンテナクエリとメディアクエリの比較

9. モダンなレスポンシブデザイン

• モバイルファーストデザイン
• レスポンシブブレークポイント
• フルイッドタイポグラフィ
• フルイッドスペーシング
• clamp()
• モダンなビューポート単位:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• ダイナミックビューポートの考慮事項
• コンテナ相対単位
• レスポンシブ画像とメディア
• 不要なメディアクエリの削減

10. 論理プロパティと国際化

• 論理CSSプロパティと物理CSSプロパティ
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• 論理サイズ指定
• 書き込みモード
• 右から左（RTL）レイアウト
• 国際対応可能なインターフェースの構築

11. モダンなタイポグラフィ

• レスポンシブタイポグラフィ
• ベリアルフォント
• フォント読み込みの考慮事項
• font-size-adjust
• フルイッドタイプスケール
• テキストの折り返しとオーバーフロー
• text-wrap: balance
• text-wrap: pretty
• hyphens
• モダンなタイポグラフィのベストプラクティス

12. 変換、トランジション、アニメーション

• 2Dおよび3D変換
• トランジション
• キーフレームアニメーション
• タイミング関数
• アニメーションの組み合わせ
• 変換のパフォーマンス
• スクロール駆動アニメーション
• animation-timeline
• View-timelineの概念
• モーションアクセシビリティ
• prefers-reduced-motion
• パフォーマンスの考慮事項

13. モダンなCSS UI機能

• ネイティブCSSダイアログとポップオーバー
• インタラクティブUI状態のスタイリング
• :popover-open
• :modal
• :focus-visible
• :target
• フォーム状態のスタイリング
• accent-color
• appearance
• field-sizing
• モダンなフォームコントロール
• アクセシブルなCSSオンリーインタラクションの構築

14. 高度なCSS関数

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• 相対カラー関数
• フルイッドレイアウトのための関数の組み合わせ
• 実用的なレスポンシブデザインパターン

15. CSSプリプロセッサー

• CSSプリプロセッサーの概要
• LESS
• 変数とミキシン
• スタイルのネスト
• 関数と演算
• LESSとモダンなネイティブCSS
• プリプロセッサーが依然として有用な場面
• プリプロセッサー機能からネイティブCSSへの移行

16. デザインとアクセシビリティの考慮事項

• モダンなCSSベストプラクティス
• アクセシビリティファーストのスタイリング
• キーボードフォーカス状態
• :focus-visible
• モーション削減
• コントラストとカラーの考慮
• レスポンシブテキストとコンテンツ
• 画像上のテキスト
• アクセシブルなレスポンシブコンポーネント
• プログレッシブ・エンハンスメント

17. CSSパフォーマンスと保守性

• CSSの複雑さの削減
• 不要な重要度の回避
• 保守性のためのカスケードレイヤー
• 再利用可能なユーティリティとコンポーネントパターン
• CSSコンテインメントの概念
• content-visibility
• レンダリングとレイアウトパフォーマンス
• レイアウトシフトの削減
• 大規模CSSコードベースの整理
• モダンなブラウザ開発者ツールによるCSSデバッグ

18. 実践的なモダンCSSプロジェクト

参加者は、以下の要素を組み合わせたレスポンシブなモダンWebインターフェースを構築します：

• CSS Grid
• Flexbox
• Subgrid
• コンテナクエリ
• CSSネスト
• カスタムプロパティ
• カスケードレイヤー
• モダンなセレクタ
• フルイッドタイポグラフィ
• モダンなビューポート単位
• レスポンシブデザイン
• モダンなカラーとグラデーション
• アニメーションとトランジション
• アクセシビリティの考慮
• パフォーマンスのベストプラクティス