(イ) “id”属性と”class”属性

タグによる指定だと、そのタグの全てに効果が付与されてしまいます。

だから、「この<p>タグだけ文字の色を濃くしたいのに！」といった要望には応えることができません。

そこで、登場するのが、id・class属性です。
どっちもほとんど同じです。　見ていきましょう。

では、いくつかある<p>タグの中で、この箇所だけ文字の色を変えたい、と思ったとします。
今、HTMLは、

<p>段落１。</p>
<p>段落２。</p>
<p>段落３。</p>

です。　段落２だけ、文字を赤く変えてみましょう。

HTML:
<p>段落１。</p>
<p id="red-accent">段落２。</p>
<p>段落３。</p>

CSS:
#red-accent { color: red;}

※この、red-accentのところは、自分で自由に名前を付けられます。

こうすると、

表示例：

と、表示されます。

では、次はclass属性。
段落１と段落３の文字の大きさを大きくしたいと思います。

HTML:
<p class="big-font">段落１。</p>
<p id="red-accent">段落２。</p>
<p class="big-font">段落３。</p>

CSS:
#red-accent { color: red; }
.big-font { font-size: 130%; }

表示例：

こんな感じです。
で、idとclassの違いって何？と疑問に思ったと思いますが、その違いは
・同じ名前のidは１ページに１度しか使えない
・同じ名前のclassは１ページに何度でも使っていい
これだけです。

なんで、分かれてるんでしょうね？　一緒の方がわかりやすいのに。。　と思います。

ちなみに、タグに対する装飾、とも併用することができます。
つまり、

HTML:
<p class="big-font">段落１。</p>
<p id="red-accent">段落２。</p>
<p class="big-font">段落３。</p>

CSS:
#red-accent { color: red; }
.big-font { font-size: 130%; }
p { font-weight: bold; }

※font-weightは、太字です。

表示例：

といった具合です。

なんとなくわかって来ましたか？

どこに適用するか { 何を装飾したいか： 具体的にどうしたいか; }

です。例外はありません。

それでは、実際に、これまであなたが作ってきたウェブサイトにデザインを追加していきましょう！

あなたも、サポートメールに参加しませんか？

『初めてWeb入門』に取り組んでくださっている方にサポートメールをお送りしています。
ここでは、『初めてWeb入門』では紹介し切れなかったウェブデザインの知恵を配信しています。
名前とメールアドレスだけで参加出来ますので、興味のある方は、ぜひご参加くださいね＾＾

※サポートメールは、いつでも解除できます。詳しくはサポートメールのページをご確認ください。