CSS 入門

CSS は、ウェブページのスタイルとレイアウトに使用されます — 例えば、コンテンツのフォント、色、サイズ、空白や複数カラムへの分割やアニメーションの追加、他の装飾機能の追加などがあります。このモジュールで、CSS 習得の道のりを開始できます。セレクター、プロパティ、CSS の記述ルール、CSS を HTML に適用する方法、CSS で長さや色やその他の単位を指定する方法、カスケードと継承、CSS のデバッグが含まれています。

事前準備

このモジュールを開始する前に、以下のことを:

  1. コンピューターの基本的な使い方に慣れている、ウェブを受動的に使用している (つまり、単に閲覧したり、コンテンツを使用したりしている。)
  2. 基本的なソフトウェアをインストールする で詳細に記述されている基本的な作業環境が設定されており、Dealing with files で詳細に記述されているファイルの作成方法と管理方法を理解している。
  3. Introduction to HTML モジュールで議論されているような、基本的な HTML に慣れている。

注記: 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、JSBinThimble のようなオンラインコーディングプログラムでサンプルコードを試してください。

ガイド

このモジュールは、以下の記事を含みます。CSS の基本的な理論をすべて理解でき、スキルを確認できる十二分な機会を与えてくれます。

How CSS works
このモジュールでは、理論的な背景から始め、CSS が何かを概観し、ブラウザーが HTML を DOM に変える方法、CSS が DOM の一部に適用される方法、とても基本的な文法、ウェブページで実際に CSS を含めるために使用されるコードを学びます。
CSS 文法
次に、より詳しい CSS の文法に突入します。プロパティ とその を形成する 宣言 を行う方法を概観し、複数の宣言を形成する 宣言ブロック、宣言ブロックと セレクター から形成される完全な CSS ルール。コメントや空白のような他の CSS 文法の機能は省かれています。
セレクター
セレクターは前の記事で言及されていますが、このガイドでは、利用できるセレクターのタイプや、それがどのように動作するかを確認して、より詳しく見ていきます。
CSS の値と単位
考慮するべき CSS プロパティの値の形式はたくさんあります。数値から、色や特定の動作を実行する関数まで (背景画像を埋め込んだり、要素を回転したりするのに使用します)。正確な値を表現するために特定の単位を使用します — ボックスを 30 ピクセルの幅にしたいですか、あるいは 30 センチメートルですか、それとも 30 em ですか?このガイドでは、長さや色、簡単な関数のように一般的な値を概観します。また、度数、単位なし数値のようにあまり一般的でない値についても確認します。
カスケードと継承
CSS は、セレクターが衝突する状況 (異なるセレクターが同じ要素を選択した場合; どちらが勝ち、適用されることになるのでしょうか?) や他の要素にネストされた内部の要素 (親要素に適用されたスタイルは子要素ににも継承されます; されないものもあります) を解決するための、2 つの異なる、しかし関係したシステムを持ちます。この記事は、両方のシステムを十分に詳細に取り扱います。
ボックスモデル
CSS ボックスモデルは、ウェブをレイアウトする基礎です — それぞれの要素は、長方形として表現され、ボックスのコンテンツ、パディング (padding)、枠線、余白 (margin) で玉ねぎの層のように一つずつ構成されています。ブラウザーがウェブページをレンダリング (描画) するにしたがい、それぞれのボックスに何のスタイルが適用されるか、玉ねぎの層がどれほど大きいか、ボックスがそれぞれの関係でどこに配置されるかを処理します。CSS レイアウトを作成する方法を理解する前に、ボックスモデルを理解する必要があります。
CSS のデバッグ
このモジュールの最後の記事では、CSS のデバッグの基礎を確認します。CSS が適用されたページを見て、CSS コード内のエラーを見つける手助けとなるツールを紹介します。

課題

以下の課題は、上述のガイドで CSS の基礎を理解できたかテストできます。

CSS 知識の基礎
この課題は、入念に作成された練習問題で上記のガイドの理解をテストします。

関連情報

ウェブリテラシー中級 1: CSS 入門
Mozilla の基礎コースは、CSS 入門 モジュールで取り上げられたスキルの多くを確認し、テストできます。CSS セレクター、属性、値を使用したウェブページ上の HTML 要素をスタイリングする方法を学んでください。

ドキュメントのタグと貢献者

 このページの貢献者: dskmori, chrisdavidmills
 最終更新者: dskmori,