CSSの基本構文を完全マスター！初心者でもわかるセレクタ・プロパティ・値の書き方

CSSの基本構文を理解しよう！セレクタ・プロパティ・値の書き方

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

生徒

「CSSの基本的な書き方ってどうなってるんですか？」

先生

「CSSには、セレクタ・プロパティ・値という3つの要素があります。それぞれの役割を覚えましょう。」

生徒

「難しそうに聞こえるけど、わかりやすく教えてください！」

先生

「もちろん！それではCSSの基本構文について、丁寧に見ていきましょう。」

1. CSSの基本構文とは？

CSS（シー・エス・エス）とは、HTML（エイチ・ティー・エム・エル）で作られたホームページの見た目を整えるための言語です。CSSを書くことで、文字の色やサイズ、背景の色や余白（よはく）などを自由に設定できます。

CSSの基本構文は、「セレクタ」「プロパティ」「値（バリュー）」の3つの要素からできています。この3つをセットで覚えることが、CSSを理解する第一歩です。

2. セレクタ・プロパティ・値とは何かを理解しよう

セレクタは、「どのHTMLタグにスタイルを当てるか」を指定するものです。たとえば、「h1」タグにCSSを使いたい場合、セレクタは「h1」と書きます。

プロパティは、「どんなスタイルを設定するか」を決める項目です。たとえば、文字の色を変えたいときには「color」というプロパティを使います。

値（バリュー）は、「具体的にどのようなスタイルにするか」を書く部分です。たとえば「color: red;」と書けば、文字色を赤にするという意味になります。

つまり、CSSの構文は以下のようになります。

セレクタ { プロパティ: 値; }

3. 実際にCSSの基本構文を書いてみよう

以下は、「h1」タグの文字の色を青に変える基本的なCSSの例です。


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

<h1>これは見出しです</h1>

ブラウザ表示

このコードの意味を一つずつ解説します。

h1：これはセレクタです。h1タグにスタイルを適用するという意味です。
color：これはプロパティで、「文字の色を指定する」という働きをします。
blue：これは値で、「青色にする」ということを示します。

4. CSS構文のルールを覚えよう

CSSの構文にはいくつかの決まりごとがあります。初心者の方は以下のポイントを意識して書いてみましょう。

各プロパティと値のペアの最後にはセミコロン（ ; ）をつけます。
波かっこ（ { } ）の中にプロパティと値を書きます。
プロパティと値の間にはコロン（ : ）を入れます。

これらのルールが守られていないと、CSSが正しく反映されません。

5. 複数のプロパティを同時に使うには？

1つのタグに対して、文字の色だけでなく、文字のサイズや背景色など複数のスタイルを同時に設定することができます。

たとえば、次のように書くと、h1タグに対して文字色・文字サイズ・背景色をまとめて設定できます。


<style>
	h1 {
	    color: green;
	    font-size: 24px;
	    background-color: #f0f0f0;
	}
</style>

<h1>スタイルをまとめて設定した見出し</h1>

ブラウザ表示

このように、プロパティと値のセットを複数書いて、自由にスタイルをカスタマイズできます。

6. よく使う基本プロパティを覚えよう

CSSでは、以下のような基本プロパティをよく使います。まずはこのあたりを覚えると、いろいろな見た目の変更ができるようになります。

color：文字の色を指定
background-color：背景の色を指定
font-size：文字の大きさを指定
text-align：文字の位置を左寄せ・中央・右寄せにする

7. セレクタを変えると他のタグにも使える

セレクタを変えれば、「p」タグ（段落）や「h2」タグなどにも同じようにCSSを使えます。


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

<p>この段落は赤色で表示されます。</p>

ブラウザ表示

このように、使いたいHTMLタグの名前をセレクタに書くだけで、好きな見た目にカスタマイズできます。

8. CSSでHTMLを美しく見せよう！

CSSは、ホームページを「きれいに」「見やすく」するためにとても重要です。基本構文であるセレクタ・プロパティ・値を正しく理解することで、自分の思いどおりにデザインできます。

たとえば文字の色を変えるだけで印象が変わり、文字の大きさを調整するだけで読みやすくなります。

これからCSSを学ぶうえで、この基本構文は何度も使うので、しっかりと身につけていきましょう。

まとめ

ＣＳＳの基本構文であるセレクタとプロパティと値の三つの組み合わせは、ホームページの見た目を整えるために欠かせない基礎であり、ひとつひとつの設定が全体の読みやすさや印象を大きく左右します。とくに初心者にとって大切なのは、タグに対してどのような装飾を当てたいのかを明確にし、その目的に合ったプロパティと値を正しく選び、適切な構文で記述することです。見出しの色を整えるだけでも雰囲気が大きく変わり、段落の背景色を調整するだけでも読みやすさが向上するため、基本構文を理解することで表現の幅が広がります。また複数のプロパティを組み合わせて記述することでより柔軟にデザインを構築でき、学習を重ねるほど多様な表現が扱えるようになります。以下にまとめとして簡単なスタイルと表示例を掲載します。


<style>
	h2 {
	    color: purple;
	    font-size: 26px;
	    background-color: #f5f5ff;
	}
	p {
	    font-size: 18px;
	    color: #333333;
	}
</style>

<h2>まとめの見出しサンプル</h2>
<p>ここではＣＳＳの基本構文を使った表示例を示しています。</p>

ブラウザ表示

まとめとして、ＣＳＳを身につけるためには構文の形を覚えるだけでなく、目的に合わせて最適な記述を選び取る力も重要になります。セレクタを変えることでさまざまなタグに柔軟にスタイルを適用でき、プロパティを追加するだけで印象も操作しやすくなります。ホームページ制作の現場では視認性と安定したデザインが求められるため、今回学んだ基本構文を確実に理解しておくことが、今後の応用や高度なデザインにつながっていきます。とくに色や背景、文字サイズはデザインの基礎であり、多くの場面で頻繁に使用されるため、繰り返し練習することで自然と使いこなせるようになります。シンプルな設定を積み重ねることで洗練されたページに近づいていくため、焦らず一つずつ確実に学び続けることが大切です。

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

生徒「きょう学んだＣＳＳの構文は、思ったより整理されていて覚えやすかったです。とくにセレクタとプロパティと値がどのように組み合わさるのかが理解できました。」

先生「その理解はとても大切ですね。基本構文がしっかり身についていれば、どんなタグでも自由に見た目を調整できますよ。」

生徒「段落の色や大きさを変えるだけでも印象が変わることがわかって、ホームページ全体のデザインが楽しく感じました。」

先生「その感覚が成長の証ですね。これからは複数のプロパティを組み合わせたり、別のセレクタも使い分けてみるとさらに表現の幅が広がりますよ。」

生徒「もっと練習して、思いどおりのページを作れるようになっていきたいです！」

先生「ぜひ続けていきましょう。基本を丁寧に積み上げることで確実に上達しますよ。」