序章

このチュートリアルでは、HTMLコンテンツのレイアウトをスタイル設定および制御するためのCSSルール（ルールセットとも呼ばれます）を理解および作成する方法を学習します。 チュートリアルは、<h1> HTML要素を青色にするCSSルールの例から始まり、CSSルールの各コンポーネントを説明する前にCSSルールがどのように機能するかを学習します。

前提条件

このチュートリアルに従うには、前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしていることを確認してください。

CSSルールの例を調べる

以下はCSSルールの例です。 次のルールをstyles.cssファイルに書き込みます。

styles.css
h1 {
  color: blue;
}

styles.cssファイルを保存します。 color: blueを右に2スペースインデントしていることに注意してください。 このインデントは、開発者がコードを読みやすくするため、CSSスタイルのルールを作成するための推奨されるベストプラクティスです。

追加したルールは、HTML要素<h1>でタグ付けされたHTMLテキストコンテンツに青色を与えるようにブラウザに指示します。 （HTML要素の動作の復習については、チュートリアル HTML要素の使用方法と理解方法を参照してください）。

次に、<h1>要素でタグ付けされたHTMLコンテンツをindex.htmlファイル（ドキュメント上部の<link rel="stylesheet" href="css/styles.css">行のすぐ下）に追加します。

index.html
<h1>A Sample Title</h1>

ファイルを保存し、ブラウザにHTMLファイルをロードして、結果を確認します。 （ブラウザでHTMLファイルを表示する手順については、チュートリアルの手順ブラウザでオフラインHTMLファイルを表示する方法にアクセスしてください）。

ブラウザで、次の結果が表示されます。

！[ウェブページの結果]（ https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/a-simple-title.png ）

同じ結果が得られない場合は、index.htmlファイルとstyles.cssファイルの両方を保存し、コードにエラーがないことを確認してください。

CSSルールのコンポーネントを理解する方法

次に、CSSルールの例を調べて、それぞれの異なるコンポーネントを理解しましょう。 一般に、CSSルールは、セレクター、宣言ブロック、プロパティ、および値で構成されます。 次の図は、これらの各部分がルールでどのように表されるかを示しています。

Diagram of a CSS rule

次に、これらの各部分と、それらがサンプルのCSSルールとどのように関連しているかを調べてみましょう。

  • セレクターは、CSSルールによってスタイル設定されるコンテンツのタイプを示します。 セレクターは、CSSルールの先頭で、開き中括弧の外側に配置されます。 CSSの例では、セレクターは<h1> HTML要素であり、tagセレクターです。 他のタイプのセレクターについては、チュートリアルシリーズの後半で学習します。
  • 宣言ブロックは、セレクターのスタイルルールを宣言するCSSルールの一部です。 宣言ブロックは、中括弧の内側に配置されます。 CSSの例では、宣言ブロックはcolor:blue;です。
  • property は、font-sizeやcolorなど、CSSルールが変更するHTMLコンテンツのプロパティを指します。 CSSの例では、プロパティはcolor.です。プロパティの後にコロンが追加されていることに注意してください。
  • value は、16pxやblueなど、プロパティに割り当てられた特定の値を指します。 CSSルールの例では、値はblue.です。値の後にセミコロンが追加されていることに注意してください。

セレクターのルールを宣言すると、そのセレクターでマークされたHTMLドキュメント内のすべてのコンテンツがルールに従って表示されます。 ただし、競合するCSSルールが優先されると、例外が発生します。

結論

このチュートリアルでは、セレクター、宣言ブロック、プロパティ、値など、完全なCSSルールを作成するために必要なすべてのコンポーネントを調べました。

次のチュートリアルでは、CSSルールに複数のプロパティを追加し、単一のHTMLドキュメントに対して異なるCSSルールを作成します。