CSS

ページにスタイルを与えよう

CSSは素のドキュメントを洗練されたインターフェースへと変えます。セレクタ、ボックスモデル、Flexbox、Grid、レスポンシブデザイン、さらにアニメーションやCSSアーキテクチャまで。このトラックでは、体系的にスタイリングするために必要なすべてを扱います。

基礎

初級 - 基本を一歩ずつ

• CSSをページに接続するCSSとは何か、HTMLページにどう接続するのか、そして最初のルールをどう書くのかを学びましょう。
• 基本のセレクタと色要素・クラス・idのセレクタで要素を正確に狙えるようになり、そこに色を適用しましょう。
• ボックスモデルすべての要素がコンテンツ・パディング・ボーダー・マージンからなるボックスであることを理解し、box-sizingを使いこなしましょう。
• テキストとフォントfont-familyでフォントを選び、大きさ・太さ・行間を調整して、読みやすいテキストに仕上げましょう。
• 最初のレイアウトブロック要素とインライン要素を見分け、要素を中央に配置する定番のテクニックを学びましょう。

ステップアップ

中級 - 実践的なものを作る

• カスケード、詳細度、継承詳細度を使ってどのCSSルールが勝つかを予測できるようになり、継承を活用してコード量を減らしましょう。
• Flexbox: 軸、justify/align、gap、flex-growFlexboxの2つの軸をマスターして、日常的なレイアウトで要素を揃え、中央に配置し、分配しましょう。
• Grid: 列、行、エリアCSS Gridの列、行、名前付きエリアを使って、ギャラリーやページ全体のレイアウトを組み立てましょう。
• 配置: relative、absolute、fixed、sticky、z-indexCSSの配置と適切に管理されたz-indexのスケールを使って、バッジ、ヘッダー、モーダルを思いどおりの位置にぴったり固定しましょう。
• レスポンシブデザイン: メディアクエリ、相対単位モバイルファーストのアプローチ、メディアクエリ、rem・%・vw 単位を使って、インターフェースをあらゆる画面サイズに適応させましょう。

応用

上級 - 高度なパターンとパフォーマンス

• CSS変数とcalc/clamp関数カスタムプロパティ、それがカスケードの中で実行時にどう解決されるか、そして流動的なインターフェースのためのcalc()関数とclamp()関数をマスターしましょう。
• トランジションとアニメーション：@keyframes、transform、タイミングtransformとopacityでコンポジタ上でアニメーションさせ、@keyframesを構造化し、ユーザーのモーション設定を尊重しましょう。
• モダンなセレクタ：:has、:is、:where、高度な:nth-child最近の機能的擬似クラスを活用して、コンテンツに基づいて選択し、詳細度を膨らませずにセレクタをグループ化し、複雑なパターンをターゲットにしましょう。
• CSSアーキテクチャ：BEM、ユーティリティファースト、ファイル構成BEMとユーティリティファーストのアプローチ、チームにおける実際のトレードオフを比較し、カスケードレイヤーでファイルを構造化しましょう。
• コンテナクエリとCSSネスティングビューポートではなくコンテナに対してコンポーネントをレスポンシブにし、ネイティブなネスティングでスタイルシートを構造化しましょう。

マスター

エキスパート - 設計、内部構造、エッジケース

• レンダリングパイプライン: リフロー、リペイント、コンポジットブラウザのレンダリングの4つのフェーズを理解し、どのCSSプロパティが高コストなのか、そして will-change が内部でどのように働くのかを正確に把握しましょう。
• カスケードレイヤー(@layer)と @scope2つの新しいカスケード基準、すなわちレイヤーとスコープの近接性を使いこなし、詳細度の争いなしにスタイルを設計しましょう。
• 色と高度な関数: oklch、color-mix、min/max知覚的な色空間、相対色構文、そして型付きの数学関数を活用し、ブラウザが計算してくれるデザインシステムを構築しましょう。
• エキスパートのグリッド: subgrid、auto-fit、minmaxメディアクエリなしで自己適応するグリッドを構築し、subgrid で入れ子のコンポーネントを親のトラックに揃えましょう。
• モダンなインタラクション: scroll-snap、ビュートランジション磁力のあるスクロール、ブラウザがアニメーションする状態遷移、そして prefers-reduced-motion の厳格な尊重を組み立てましょう。