“id”属性と”class”属性

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

だから、「この

タグだけ文字の色を濃くしたいのに!」といった要望には応えることができません。

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

では、いくつかある

タグの中で、この箇所だけ文字の色を変えたい、と思ったとします。
今、HTMLは、

<p>段落1。</p>
<p>段落2。</p>
<p>段落3。</p>

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

HTML:

<p>段落1。</p>
<p id="red-accent">段落2。</p>
<p>段落3。</p>

CSS:

#red-accent { color: red;}

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

こうすると、

表示例:

と、表示されます。

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

<p class="big-font">段落1。</p>
<p id="red-accent">段落2。</p>
<p class="big-font">段落3。</p>

CSS:

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

表示例:

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

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

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

HTML:

<p class="big-font">段落1。</p>
<p id="red-accent">段落2。</p>
<p class="big-font">段落3。</p>

CSS:

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

※font-weightは、太字です。

表示例:

といった具合です。

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

どこに適用するか { 何を装飾したいか: 具体的にどうしたいか; }
です。例外はありません。

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


関連記事

  1. タイトルをつける

  2. 改行をする

  3. テストアップロードをしよう

  4. あなたが全くのど素人だったとしても「自分の納得できるウェブサイト」を絶…

  5. デザインをする言語CSS

  6. リンクをする

お手本ナビの無料HPデザイン

ランダムピックアップ