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のフォントサイズに設定されます。
