CSS: ウェブをスタイリングする言語
CSSはウェブページのすべてのビジュアル要素を制御します — 色、レイアウト、間隔、アニメーション、レスポンシブ対応。シンプルなプレゼンテーション層から完全なデザインシステム言語へと進化し、コンテナクエリ、@layer、論理プロパティ、Houdini APIなどの最新機能により、開発者はレンダリングを細かく制御できるようになりました。このトラックはCSSの全範囲をカバーしており、最初のセレクタの記述から大規模本番環境のコードベースで使用されるスケーラブルなデザインシステムの設計まで対応しています。
学習内容
構文、セレクタ、色、タイポグラフィから始まり、ボックスモデル、displayプロパティ、ポジショニングの確かな理解を構築します。その後、標準的かつ高度なレイアウトのためのFlexboxとCSS Gridを学び、レスポンシブデザインとメディアクエリを適用し、メンテナンス性の高いテーミングのためのCSS変数、カスタム関数、デザイントークンを使用します。トランジション、キーフレームアニメーション、トランスフォーム、フィルタ、ブレンドモード、ダークモード、SassやPostCSS、CSS-in-Jsパターンなどの最新ツールもカバーします。トラックはBEM、詳細度とカスケード、コンテナクエリ、@layerカスケードレイヤ、CSS Houdini、パフォーマンスを使用したCSS設計で完結します。
学習パス
40のコースがA1からC1までをカバーしています。初期のA1とA2コースはセレクタ、ボックスモデル、疑似クラス、疑似要素、ユニットという基礎を確立します。B1コースはFlexbox、Grid、レスポンシブデザイン、アニメーション、DevToolsでのデバッグ、CSS関数をカバーします。B2コースは高度なFlexboxとGrid、Sass、PostCSS、CSS-in-Js、デザイントークン、CSS Shapes、論理プロパティ、コンテナクエリ、CSSレイヤへと進みます。3つのC1コース — CSS Houdini、CSS Performance、CSS Future — はプラットフォームの最先端に対応しています。
学習方法
各コースは短く、焦点を絞ったレッスンに分かれており、内蔵エディタでリアルタイムフィードバック付きで直接完了できます。困ったときはいつでもAIチューターが利用可能で、各概念が次に進む前に最後のものを強化するよう、意図的に段階的な進行になっています。