このコースでは、CSS の基本を明確で理解しやすい単位に分解します。以降のモジュールでは、CSS の基本的な仕組みと、プロジェクトで効果的に使用する方法について学習します。[Learn CSS] ロゴの横にあるメニュー ペインを使用して、モジュールを移動します。
ボックスモデル、カスケードと特異性、Flexbox、グリッド、z-index などの CSS の基礎を学びます。また、関数、色の種類、グラデーション、論理プロパティ、継承についても学習し、あらゆるユーザー インターフェースに対応できる、バランスの取れたフロントエンド デベロッパーを目指します。
各モジュールには、知識を試すためのインタラクティブなデモと自己評価が満載されています。読み物やデモによる学習に加えて、各トピックに付随するポッドキャスト エピソードも用意されています。これは、知識を習得し、さらに広げていくためのもう 1 つの方法です。
このコースは、CSS の初心者と上級者の両方を対象としています。このシリーズを最初から最後まで読むことで、CSS の概要を把握できます。また、特定のスタイリングのトピックの参考資料として使用することもできます。ウェブ開発全般を初めて行う場合は、Learn HTML でマークアップの記述方法やスタイルシートのリンク方法をご確認ください。
このコースでは、次のことを学びます。
ボックスモデル
CSS で表示されるものはすべてボックスであるため、CSS ボックスモデルの仕組みを理解することは CSS の基本です。
セレクタ
要素に CSS を適用するには、要素を選択する必要があります。CSS には、これを行うためのさまざまな方法が用意されています。このモジュールでは、それらの方法について説明します。
ネスト
CSS スタイルルールのネストにより、スタイルシートを整理し、読みやすく、保守しやすくすることができます。
カスケード
競合する 2 つ以上の CSS ルールが要素に適用されることがあります。ブラウザがどちらを使用するかを選択する方法と、この選択を制御する方法について説明します。
特異性
このモジュールでは、カスケードの重要な部分である特異性について詳しく説明します。
継承
一部の CSS プロパティは、値を指定しないと継承されます。このモジュールでは、この仕組みと、それを活用する方法について説明します。
色
CSS で色を指定する方法はいくつかあります。このモジュールでは、最も一般的に使用される色の値について説明します。
サイズ単位
CSS を使用して要素のサイズを設定する方法と、ウェブの柔軟なメディアを操作する方法について説明します。
レイアウト
コンポーネントまたはページ レイアウトを構築する際に選択できるさまざまなレイアウト方法の概要。
Flexbox
Flexbox は、アイテムのグループを 1 次元でレイアウトするために設計されたレイアウト メカニズムです。このモジュールでは、その使用方法を学習します。
グリッド
CSS グリッド レイアウトは、行と列でレイアウトを制御する 2 次元レイアウト システムを提供します。グリッドのすべての機能をご確認ください。
論理プロパティ
論理プロパティとフロー相対プロパティおよび値は、画面の物理的な形状ではなく、テキストのフローにリンクされています。この新しい CSS アプローチを活用する方法について説明します。
カスタム プロパティ
カスタム プロパティ（CSS 変数）を使用すると、CSS の値を整理して再利用できるため、スタイルがより柔軟になり、理解しやすくなります。
スペーシング
使用しているレイアウト メソッドと作成しているコンポーネントに最適な要素のスペーシング方法を選択する方法について説明します。
疑似要素
疑似要素は、HTML を追加することなく、要素を追加またはターゲット設定するようなものです。さまざまな役割があり、このモジュールでそれらについて学習します。
疑似クラス
疑似クラスを使用すると、状態の変化に基づいて CSS を適用できます。つまり、無効なメールアドレスなどのユーザー入力にデザインが反応できます。
枠線
枠線はボックスのフレームを提供します。CSS を使用して枠線のサイズ、スタイル、色を変更する方法について説明します。
シャドウ
CSS でテキストや要素に影を追加する方法はいくつかあります。各オプションの使用方法と、各オプションが設計されたタスクについて説明します。
フォーカス
ウェブ アプリケーションにおけるフォーカスの重要性を理解する。フォーカスの管理方法と、マウスを使用するユーザーとキーボードを使用して移動するユーザーの両方に対してページ内のパスが機能するようにする方法について説明します。
カーソルとポインタ
カーソルは、ユーザーが操作している対象を把握するための重要な手段です。このモジュールでは、特定の状況でカーソルをスタイル設定する方法について学習します。
Z-index とスタッキング コンテキスト
z-index とスタッキング コンテキストを使用して、要素が重なる順序を制御する方法について説明します。
アンカーの配置
CSS アンカー配置は、別の要素を基準として要素を宣言的に配置する方法を提供します。
ポップオーバーとダイアログ
ポップオーバーは popover 属性を持つ要素で、ツールチップ、アラート、トーストなど、さまざまなインタラクティブ パターンに役立ちます。
関数
CSS にはさまざまな組み込み関数があります。主な機能とその使用方法について説明します。
パス、シェイプ、クリッピング、マスキング
パス、シェイプ、クリッピング、マスキングを使用すると、さまざまな関数を通じて CSS で複雑なシェイプをレンダリングできるようになり、ユーザーに印象的なエクスペリエンスを提供できます。
グラデーション
このモジュールでは、CSS で使用できるさまざまな種類のグラデーションの使用方法について説明します。グラデーションを使用すると、画像を作成するためのグラフィック アプリを必要とせずに、さまざまな効果を生み出すことができます。
アニメーション
アニメーションは、インタラクティブな要素を強調し、デザインに面白みと楽しさを加えるのに最適な方法です。CSS でアニメーション効果を追加して制御する方法について説明します。
フィルタ
CSS のフィルタを使用すると、グラフィック アプリケーションでしか実現できないと思っていた効果を適用できます。このモジュールでは、利用可能な機能について説明します。
ブレンドモード
このブレンドモードのモジュールでは、2 つ以上のレイヤを組み合わせて合成効果を作成する方法と、白い背景の画像を分離する方法について説明します。
リスト
リストは、構造的には、リストアイテムで埋められたリスト コンテナ要素で構成されます。このモジュールでは、リストのすべての部分のスタイルを設定する方法について学習します。
カウンタ
CSS には、さまざまなユースケースでリスト内のカウンタを制御するいくつかの方法が用意されています。このモジュールでは、リスト内のカウンタを制御する方法について説明します。
移行
要素の状態間の遷移を定義する方法について説明します。トランジションを使用して、ユーザー操作に対する視覚的なフィードバックを提供し、ユーザー エクスペリエンスを向上させます。
SPA のビュー遷移
ビュー遷移を使用すると、SPA のページ間の継続性やコンテキストを示すことができます。
オーバーフロー
オーバーフローは、設定された親のサイズに収まらないコンテンツを処理する方法です。このモジュールでは、固定観念にとらわれずに、オーバーフローしたコンテンツのスタイルを設定する方法を学びます。
背景
CSS を使用してボックスの背景のスタイルを設定する方法を学びます。
テキストとタイポグラフィ
ウェブ上でテキストのスタイルを設定する方法について説明します。
コンテナクエリ
メディアクエリとは異なり、コンテナクエリを使用すると、要素の祖先またはコンテナのサイズと状態に基づいて、要素をより具体的に調整できます。
まとめと次のステップ
次のステップに進むためのその他のリソース。
それでは、CSS を学習する準備はできましたか？さっそく始めましょう。