CSSの書式を徹底解説！初心者でもわかるセレクタ、プロパティ、値の使い方

新人と先輩の会話形式で理解しよう

新人

「CSSの書き方がよくわからないんですが、どこから始めれば良いんでしょうか？」

先輩

「CSSでは、セレクタ、プロパティ、値という3つの基本的な要素を使って、ウェブページのデザインを設定します。これらを組み合わせることで、デザインが決まりますよ。」

新人

「それぞれの要素は、具体的にどう使うんですか？」

先輩

「それでは、まずはそれぞれの要素を詳しく見ていきましょう！」

1. セレクタとは？

CSSにおけるセレクタは、スタイルを適用したいHTMLの要素を指定する部分です。例えば、h1タグやpタグなど、対象となるHTMLタグを指定します。

例えば、以下のコードでは、pタグを指定して、そのテキストの色を赤に変更します：


<style>
    p {
        color: red;
    }
</style>

<p>こんにちは、世界！</p>

ブラウザ表示

このコードでは、pタグ内のテキストが赤くなります。

2. プロパティとは？

プロパティは、特定のHTML要素に対して適用するスタイルの種類を指定します。例えば、色を指定するcolorや、フォントサイズを指定するfont-sizeなどです。

例えば、colorプロパティを使って、テキストの色を青に設定する場合は次のように書きます：


<style>
    h1 {
        color: blue;
    }
</style>

<h1>こんにちは、CSS！</h1>

ブラウザ表示

このコードでは、h1タグのテキストが青く表示されます。

3. 値とは？

値は、プロパティに設定する具体的な内容を指定する部分です。例えば、色の値「red」や「#ff0000」、フォントサイズの値「16px」などです。

次に、font-sizeプロパティに「20px」という値を設定し、h2タグのフォントサイズを変更する例を見てみましょう：


<style>
    h2 {
        font-size: 20px;
    }
</style>

<h2>これがフォントサイズ20pxのテキストです。</h2>

ブラウザ表示

このコードを実行すると、h2タグのフォントサイズが20pxに設定されます。

4. セレクタ、プロパティ、値を組み合わせてみよう

セレクタ、プロパティ、値を組み合わせることで、スタイルを複数の要素に同時に適用できます。例えば、以下のコードでは、pタグの文字色を緑にし、フォントサイズを18pxに設定しています：


<style>
    p {
        color: green;
        font-size: 18px;
    }
</style>

<p>このテキストは緑色で、フォントサイズは18pxです。</p>

ブラウザ表示

これにより、pタグのテキストが緑色になり、フォントサイズが18pxになります。

5. 実際にCSSを使ってみよう

実際に、h1タグやpタグに異なるスタイルを適用するHTMLとCSSを作成してみましょう：


<style>
    h1 {
        color: purple;
    }
    p {
        font-size: 16px;
        color: orange;
    }
</style>

<h1>ウェブページのタイトル</h1>
<p>これは段落のテキストです。</p>

ブラウザ表示

このコードでは、h1タグのテキストが紫色に、pタグのテキストがオレンジ色で16pxのフォントサイズに設定されます。

6. クラスセレクタとIDセレクタ

CSSでは、特定の要素だけにスタイルを適用したい場合、クラスセレクタやIDセレクタを使用します。

クラスセレクタは複数の要素に使い回すことができ、IDセレクタは1つの要素に対して使用するのが基本です。


<style>
    .text-red {
        color: red;
    }
    #main-title {
        font-size: 24px;
    }
</style>

<h1 id="main-title">タイトル</h1>
<p class="text-red">このテキストは赤色です。</p>

ブラウザ表示

このように、クラスやIDを使うことで、より細かくスタイルをコントロールすることができます。

7. 複数セレクタの指定方法

CSSでは、複数の要素に同じスタイルを適用する場合、セレクタをカンマで区切って指定することができます。

これにより、同じスタイルを何度も書く手間を省くことができます。


<style>
    h1, h2, p {
        color: blue;
    }
</style>

<h1>見出し1</h1>
<h2>見出し2</h2>
<p>段落テキスト</p>

ブラウザ表示

このコードでは、h1、h2、pすべてのテキストが青色になります。

8. CSSの優先順位（カスケード）

CSSには「カスケード」と呼ばれる優先順位のルールがあります。同じ要素に複数のスタイルが指定された場合、どのスタイルが適用されるかが決まります。

基本的には、IDセレクタはクラスセレクタよりも優先され、クラスセレクタは要素セレクタよりも優先されます。


<style>
    p {
        color: blue;
    }
    .text {
        color: green;
    }
    #text-id {
        color: red;
    }
</style>

<p id="text-id" class="text">このテキストの色は？</p>

ブラウザ表示

この場合、IDセレクタが最も優先されるため、テキストは赤色で表示されます。