このコースでは、CSS の基礎を明確でわかりやすい各要素に分解します。以降のいくつかのモジュールでは、CSS の主要な機能の仕組みと、それらをプロジェクトで効果的に使用する方法を学びます。「Learn CSS」ロゴの横にあるメニューペインを使用して、モジュールを移動します。
ボックスモデル、カスケードと特異性、Flexbox、グリッド、Z-Index など、CSS の基礎を学びます。また、あらゆるユーザー インターフェースに対応可能な、バランスの取れたフロントエンド デベロッパーになるように、関数、色の種類、グラデーション、論理プロパティ、継承についても学習します。
各モジュールには、理解度をテストするためのインタラクティブなデモと自己評価が満載です。読書やデモを通じて学ぶだけでなく、学習し、知識をさらに拡大するための別の方法として、各トピックに続くポッドキャストのエピソードもあります。
このコースは、CSS の初心者と上級者の両方を対象としています。このシリーズを最初から最後まで通じて、CSS の概要を理解できます。また、特定のスタイル設定のリファレンスとして使用することもできます。ウェブ開発全般を初めて行う場合は、HTML の学習を参照して、マークアップの記述方法とスタイルシートのリンク方法を確認してください。
主な内容は次のとおりです。
箱のモデル
CSS に表示されるものはすべてボックスであるため、CSS のボックスモデルの仕組みを理解することが CSS の基本となります。
セレクタ
要素に CSS を適用するには、その要素を選択する必要があります。CSS にはこれを行うためのさまざまな方法があり、このモジュールではそれらを確認できます。
滝
場合によっては、1 つの要素に複数の競合する CSS ルールが適用されることがあります。ブラウザによる選択方法と、選択内容を制御する方法をご確認ください。
特異性
このモジュールでは、カスケードの重要な部分である具体性について詳しく説明します。
継承
一部の CSS プロパティは、値を指定しない場合に継承されます。このモジュールでは、その仕組みと活用方法を確認します。
色
CSS で色を指定する方法はいくつかあります。このモジュールでは、特によく使用される色の値を検証します。
サイズ単位
ウェブの柔軟なメディアに合わせて、CSS を使用して要素のサイズを設定する方法を確認します。
レイアウト
コンポーネントやページ レイアウトを作成する際に選択する必要がある、さまざまなレイアウト メソッドの概要。
Flexbox
Flexbox は、アイテムのグループを 1 次元でレイアウトするためのレイアウト メカニズムです。このモジュールではその使用方法を学びます。
グリッド
CSS グリッド レイアウトは 2 次元のレイアウト システムを提供し、行と列のレイアウトを制御します。グリッドのあらゆるコンテンツをチェックできます。
論理プロパティ
論理的なフローに相対するプロパティと値は、画面の物理的な形状ではなく、テキストの流れにリンクされます。CSS に対するこの新しいアプローチを活用する方法をご確認ください。
間隔
使用するレイアウト方法と作成するコンポーネントに最適な間隔要素を選択する方法を確認します。
擬似要素
疑似要素とは、HTML を追加せずに別の要素を追加またはターゲティングするようなものです。それらのロールにはさまざまなものがあります。このモジュールでは、それらについて説明します。
疑似クラス
疑似クラスを使用すると、状態の変化に基づいて CSS を適用できます。つまり、無効なメールアドレスなどのユーザー入力に反応できるデザインになっています。
枠線
枠線はボックスのフレームとなります。CSS を使用して枠線のサイズ、スタイル、色を変更する方法をご覧ください。
シャドウ
CSS でテキストや要素にシャドウを追加するには、いくつかの方法があります。各オプションの使用方法と、各オプションが対象とするタスクについて学びます。
フォーカス
ウェブ アプリケーションにおけるフォーカスの重要性を理解します。フォーカスを管理する方法や、マウスを使用するユーザーとキーボードを使用するユーザーの両方でページ内パスが機能するようにする方法について説明します。
Z-Index とスタッキング コンテキスト
Z-Index とスタック コンテキストを使用して、要素を重ねる順序を制御する方法を解説します。
関数
CSS にはさまざまな組み込み関数があります。主な機能とその使用方法について説明します。
グラデーション
このモジュールでは、CSS で利用可能なさまざまな種類のグラデーションの使用方法を学びます。グラデーションを使用すると、グラフィック アプリで画像を作成しなくても、数多くの有用な効果を作成できます。
アニメーション
アニメーションは、インタラクティブな要素を強調し、デザインに興味と楽しさを加えるための優れた方法です。CSS を使用してアニメーション効果を追加し、制御する方法を確認します。
フィルタ
CSS でフィルタを使用すると、グラフィック アプリケーションでしか考えられない効果を適用できます。このモジュールでは、何が利用できるかについて学習します。
ブレンドモード
このモジュールでは、2 つ以上のレイヤを組み合わせて合成効果を作成します。このモジュールでは、ブレンドモードで背景が白い画像を分離する方法を学びます。
リスト
リストは、構造上、リスト項目が入ったリストコンテナ要素で構成されます。このモジュールでは、リストのすべての部分のスタイルを設定する方法を学習します。
移行
要素の状態間の遷移を定義する方法について説明します。遷移を使用してユーザーの操作に視覚的なフィードバックを提供することで、ユーザー エクスペリエンスを向上させます。
オーバーフロー
オーバーフローは、設定された親のサイズに収まらないコンテンツを処理する方法です。 このモジュールでは、既成概念にとらわれず、はみ出すコンテンツのスタイル設定について学びます。
背景
CSS を使用してボックスの背景のスタイルを設定する方法を学びます。
テキストとタイポグラフィ
ウェブ上のテキストのスタイルを設定する方法をご確認ください。
まとめと次のステップ
次のステップに進むのに役立つその他のリソース。
それでは、CSS について学びましょう。それでは始めましょう。