class名とid名を付けてデザインをする

  • このエントリーをはてなブックマークに追加

CSSを要素別に割り当てるには

前回(第16回:CSSの文法とホームページに適用させる3つの方法)ではCSSの基本的な文法をお伝えしました。
この方法だとセレクタがHTMLタグなので、ページ内で該当する要素の装飾がすべて同じになってしまいます。
これでは自由なホームページデザインができませんね。
そんなときは、セレクタにclass名・id名を付けて管理しましょう。

class名・id名とは

class名・id名とは、宣言ブロックをひとまとめにした個別の名前だと考えてください。
個別に名前を付けてあげることで、p要素やdiv要素などのタグにそれぞれ個別に割り当てることができるようになります。

.font {
  font-size:20px;
  font-weight:bold;
}
#text {
  font-size:20px;
  font-weight:bold;
}

赤字で書かれている部分がclass名の書き方青字で書かれている部分がid名の書き方です。
class名は先頭が「.(ドット)」で始まり、id名は先頭が「#(シャープ)」で始まります。
それぞれの記号に続く名称は任意で設定することができます。

名称については数字から始めない日本語を使わないというルールを守れば何を設定しても基本的に問題ありませんが、後から見て何を設定しているのかが分かりやすい名称をつけるようにしましょう。
デザインの変更や追加を行う際に探しやすくなりますよ。

class名・id名を使って要素に割り当てる

class名、id名を使ってCSSを作成したら、今度は要素に割り当てていきましょう。

<p class=”font”>ここにはclass名「font」で作成した設定が割り当てられる</p>
<p id=”title”>ここにはid名「text」で作成した設定が割り当てられる</p>

このように、class名で作成したCSSであれば要素の後ろに「半角スペース+class=””」
id名で作成したCSSであれば要素の後ろに「半角スペース+id=””」
とそれぞれ設定してあげることで、個別のデザインを施すことができるようになります。

class名とid名の違いについて

class名は1ページの中で何度も使う事ができますが、id名は1度だけしか使う事ができません。
たとえば以下のような使い方は問題ありません

正しい使用

<p class=”font”>同じclass名の利用は何度でもOK</p>
<p class=”font”>ここにも「.font」のデザインが反映されます</p>

ですが、以下のような使い方は間違いですので注意してください。

間違えた使用

<p id=”text”>同じid名の利用は何度まで</p>
<p id=”text”>ここにも「#text」のデザインが反映されます</p>

少しややこしいのですがid名を重複して使ってしまっても、デザインはきちんと反映されますが、重複して使用しないと定められているので注意が必要です。
慣れるまではすべてのセレクタ名をclassで作成するようにしてみてください。

id名を使うメリットについて

全てclass名で作成して問題ないならば、id名の必要性がないように感じてしまいます。
ですが、1ページ中に1度しか登場しないid名の場合が使われていれば、「一部だけで使われているのだな」と簡単に把握できるので、CSSを読み解く時に便利な場合もあります。
また、ページ内リンクを設定する時にも利用できるので、メリットが全くないというわけではないのです。

まとめ

・class名、id名には数字から始めない
・class名、id名は半角英数で記述する
・class名は先頭が「.(ドット)」で始まる
・id名は先頭が「#(シャープ)」で始まる
・同じclass名は1ページ中に何度も使用できる
・同じid名の利用は1ページに1度だけ

  • このエントリーをはてなブックマークに追加

新潟県内地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

TEL:0258-31-5005FAX:0258-37-7301