先生と生徒の会話形式で理解しよう

生徒

「CSSって、どこに書けばいいんですか？書く順番とかも決まってるんですか？」

先生

「はい、CSSには書く場所と順序の基本ルールがあります。それを守ることで正しくデザインが反映されますよ。」

生徒

「なるほど！順番ってどういうことですか？ちゃんと覚えたいです！」

先生

「では、初心者にもわかるようにCSSの書き場所と順序を、具体的な例を交えて解説していきましょう！」

1. CSSの記述場所は3種類ある

CSS（シーエスエス）は、ウェブページの見た目（色・文字サイズ・レイアウトなど）を指定するための言語です。まずはCSSをどこに書くのかを理解しましょう。記述場所は主に3種類あります。

1. 外部スタイルシート（外部ファイルに書く）
2. 内部スタイルシート（HTMLファイルの中に書く）
3. インラインスタイル（HTMLタグの中に直接書く）

初心者の方には「内部スタイルシート」や「インラインスタイル」から始めるのがおすすめです。順番に具体的な使い方を見ていきましょう。

2. 内部スタイルシートの基本的な書き方

内部スタイルシートは、HTMLファイルの中に直接CSSを書く方法です。具体的には、<head>タグの中に<style>タグを使ってCSSを記述します。


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

<h1>こんにちは</h1>

ブラウザ表示

3. インラインスタイルの使い方

インラインスタイルとは、HTMLのタグの中に直接CSSのスタイルを記述する方法です。「style」という属性を使います。


<h1 style="color: green;">こんにちは</h1>

ブラウザ表示

インラインスタイルは1行で完結できて便利ですが、たくさん使うと管理が大変になるため注意しましょう。

4. 外部スタイルシートの基本

CSSファイルを別に作って、HTMLと分けて管理するのが外部スタイルシートです。HTMLファイルの<head>に下記のようにリンクします。


<link rel="stylesheet" href="style.css">

「style.css」には以下のようにCSSを書いておきます。


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

<p>これは外部スタイルの例です。</p>

ブラウザ表示

5. CSSの適用順序（優先順位）について理解しよう

CSSのスタイルは、どこに書いたかによって「どれが優先されるか」が決まります。これをCSSの優先順位（カスケード）と呼びます。

1番強い：インラインスタイル（HTMLタグ内に直接書く）
次に強い：内部スタイルシート（<style>タグ）
一番弱い：外部スタイルシート（.cssファイル）

たとえば、外部CSSで赤、内部CSSで青、インラインで緑と指定した場合、インラインの緑が最優先で適用されます。

6. CSSを書く順番にもルールがある？

CSSファイルの中に複数のスタイルを書く場合、基本的に上から順番に読み込まれます。ですが、同じ要素に対してスタイルが重なった場合は、後から書いたものが優先されます。

例えば、次のように書くとどうなるでしょうか？


<style>
    h1 {
        color: red;
    }

    h1 {
        color: blue;
    }
</style>

<h1>テスト</h1>

ブラウザ表示

この場合、「blue」が最後に書かれているので、見た目は青色になります。

7. よくある初心者のミスと対処法

プログラミング初心者がよくやってしまうCSSのミスも紹介しておきます。

CSSを書く場所を間違える → <style>タグの外に書かないように注意
記述の順序を間違える → 同じセレクタが重なる場合、後に書いた方が優先
スペルミス → color や font-size などは正しく書こう

初心者のうちは、どこに何を書いているかを整理しながら進めると、後で困らなくなります。

まとめ

CSS（シーエスエス）の記述場所や順序には明確なルールがあり、それを正しく理解して使いこなすことが、思い通りのデザインを実現する第一歩です。この記事では、CSSの3つの記述場所（外部スタイルシート・内部スタイルシート・インラインスタイル）について解説し、それぞれの使い方やメリット・デメリットも紹介しました。

また、CSSの適用順序や優先順位（カスケード）についても丁寧に説明しました。インラインスタイルが最も強く、次に内部スタイルシート、最後に外部スタイルシートが適用されるという点は、初心者がつまずきやすいポイントなので特に重要です。

CSSの順序ルールでは、同じセレクタに対するスタイルは後に書いた方が優先されるという基本的な仕組みがあることも紹介しました。これを理解していないと、なぜ意図したスタイルが反映されないのか悩む原因になります。

さらに、よくあるミス（styleタグの外に記述・スペルミス・優先順位の誤解）など、初心者がよく直面する問題とその対処法にも触れました。

実際の例では、以下のようなコードを使って説明しました：


<style>
    h1 {
        color: red;
    }

    h1 {
        color: blue;
    }
</style>

<h1>テスト</h1>

このように、同じ要素（h1）に対して複数のスタイルを記述すると、最後に書いたスタイル（この場合は青）が優先されるというCSSの基本ルールを実際に確認することができます。

今後、CSSを使ったWebデザインに取り組む際は、「どこに」「どのような順番で」書くかを常に意識することで、デザインの崩れを防ぎ、保守性の高いコードを書くことができるようになります。

先生と生徒の振り返り会話

生徒

「先生、今日の内容を振り返ると、CSSって書く場所によって優先順位が変わるんですね！」

先生

「その通りです。インラインスタイルが一番強くて、外部スタイルシートが一番弱いという順番は覚えておきましょう。」

生徒

「あと、順番っていうのは、同じセレクタのCSSが重なったときに、後の方が効くってことでしたね！」

先生

「はい、例えば赤→青と書いたら、青が優先されます。これを理解しておくと、デザインのバグも減りますよ。」

生徒

「なるほど！今度から外部CSSと内部CSSを混ぜるときも、順序に気をつけます！」

先生