【副業を始めたい人必見!】副業開始マニュアル

【クラス名とID名】ID・CLASS属性を使ったスタイルを個別で指定する方法

【クラス名とID名】ID・CLASS属性を使ったスタイルを個別で指定する方法 CSS

どうも!ニシドラ(@nishidorablog)です。

ニシドラ
ニシドラ

この記事では、CSSだけでなくHTMLにも関連しているid属性」と「class属性について解説します。

僕がCSSの勉強を始めたばかりのときに「pタグとかdivタグってページ内でたくさん使うけどCSSで個別に指定する方法あるのかな?」と考えたことがありました。

当時の僕は「数字で分けるのかな?」なんて思ってたんですけど、数字ではなく、「id・class」属性を使います。

ニシドラ
ニシドラ

このことを知ったときに腑に落ちるというかすごく納得したのを覚えています。
id・class属性を使っての指定方法を前もって知っておくことで、HTMLとCSSの理解が深くなると思います。

id属性とclass属性、それぞれの使い方と使うときの注意点やルールについて解説していきます。

スポンサーリンク

id・class属性

初めに「id」と「class」がどういう属性なのか簡単に説明します。

「id」属性と「class」属性はタグの中に記述することができる属性で、すべてのタグに指定することができます。

HTMLであらかじめid属性とclass属性を割り振っておくことで、CSSで個別にデザインを変更することができます。

id属性で付けた名前を「ID名」、class属性で付けた名前を「クラス名」と呼びます。

IDを使った書き方

先にIDを使った指定方法を説明します。

条件として、id属性には「text」という値を指定し、テキストの色を青色に表示させるようにします。

 HTMLファイルでのIDの書き方

HTMLファイルではタグの後にid属性を書き、任意のID名を「” “」の間に書きます。

先述の通り、ID名には「text」と付けます。

<p id=”text”>テキストを青色にする</p>
<p>色を付けない文</p>

CSSでスタイルの変更をする前にブラウザで表示させたのが下の画像です。

ブラウザー上での表示 html

CSSファイルでのIDの書き方

CSSの場合、をID名に「#」を付けることでスタイルを変えることができます。

「テキストを青色にする」を青色で表示させたいので、セレクターを「#text」にします。

#text {
color: blue;
}

以上のコードをCSSで書き、HTMLで読み込ませると下の画像のようになります。

ブラウザー上での表示 css

IDはページ内で同じID名を使うことができません。

classを使った書き方

次にclassを使った書き方を説明します。

class属性には「text」という値を付け、テキストにはオレンジ色に表示させるようにします。

HTMLファイルでのクラスの書き方

HTMLファイルでの書き方は先ほどのIDの書き方と変わりありません。
タグの後にclass属性を書き、任意のクラス名を「” “」の間に書きます。

「” “」の間にクラス名を書きますが、スペースで区切ることで1つのタグに複数個クラス名を指定することもできます。

<div class=”content wrapper”>○○</div>

クラス名には「text」を付けます。

<p class=”text”>色を付ける文</p>
<p>色を付けない文</p>

ブラウザ上で表示させると下の画像のようになります。

ブラウザ上での表示 html

CSSファイルでのクラスの書き方

クラス名に「.」を付けることでスタイルを変えることができます。

「テキストをオレンジ色にする」をオレンジ色で表示させたいので、セレクターを「.text」にします。

.text {
color: orange;
}

以上のコードをCSSで書き、HTMLで読み込ませると下の画像のようになります。

ブラウザ上での表示 css

ID名と違い、クラス名はページ内で何度でも使うことができます。

セットで指定する方法

これまで、ID名・クラス名を個別に指定する方法を解説してきましたが、「タグ+ID名」や「タグ+クラス名」など複数指定する方法もあります。

タグ + ID名 or クラス名

特定のタグ+「ID or クラス名」だけをCSSでスタイルを反映させることができます。
タグの後に1つスペースを空け、IDを指定した場合は「#ID名」クラスを指定した場合は「.クラス名」を書きます。

以下のHTMLコードで解説します。

<h2 class=”red”>クラス名に「red」がついているh2タグ</h2>
<p class=”red”>クラス名に「red」がついているpタグ</p>

h2タグ、pタグのどちらにも「red」というクラス名が付けられています。

pタグの「red」属性を指定してスタイルを変更する場合、CSSファイルではpタグの後に「.red」を書きます。

p .red {
color: red;
}

このように書くことで、「pタグのredというクラス名」を指定してスタイルを変えることができます。

ID属性の指定方法も変わらず、タグの後に「#○○」と書くことで指定できます。

ID名 + クラス名

ID名とクラス名の組み合わせでも指定の仕方は変わりません。

#○○ .×× {
font-size: 1px;
}

「#」もしくは「.」の後にスペースを1つ空けて書きます。

タグ、ID名、クラス名をCSSで指定できる回数に制限はありません。
見づらくなった場合は「,(カンマ)」を使って改行しましょう。

ルール

ID名・クラス名の付け方

名前の付け方にはいくつかルールがあります。

  1. 名前にスペースを入れない
  2. 英数字で書かない
  3. 「-(ハイフン)」、「_(アンダーバー)」を入れない
  4. 一文字目は必ず英字

以上の4つを守って名前を付けましょう。

日本語でID名・クラス名を付けることも可能ですが、バージョンによってはエラーが出てしまうことがあります。
英数字で揃える方が無難です。

優先順位

CSSではID⇒クラス⇒タグ」の順で優先順位が決まっています。

下記のコードでは、h2タグには「content」というID名と「wrapper」というクラス名が付けれれていて、ID名・クラス名の両方が指定されています。

<h2 id=”content” class=”wrapper”>ID名とクラス名の両方付けられている</h2>

CSSで異なる色を指定してみます。
「content」にはテキストの色を赤色に、「wrapper」にはテキストの色を緑色に変えるようにCSSを書いてみます。

#content {
color: red;
}
.wrapper {
color: green;
}

結果をブラウザで表示するとテキストが赤色に変わりました。
IDで付けた「content」が優先されたのがわかると思います。

結果

ID・クラスを同じタグに適用させようとするとID名が優先されます。

複数のIDやクラスを付ける

1つのタグに複数のID名やクラス名を付ける場合は、1つスペースを空けることで区別することができます。

<p class=”text content wrapper”></p>

同じID名は1ページに1つ

同じID名は1ページに1つしか付けることができません。

理由は、リンクの挿入方法を解説した記事での「ページ内リンクを指定する方法」で、ページ内リンクにジャンプするにはid属性を指定すると解説しました。

複数個同じID名が存在しているとページ内でエラーが起こり、特定の場所にジャンプできなくなってしまいますので「同じID名はページ内に1つ」というルールになっています。

クラス名は1ページに何度でも使えます。

まとめ

今回の内容をまとめると以下のようになります。

  • id属性にはID名、class属性にはクラス名を付ける
  • ID:HTMLでは「id=”○○”」と書き、CSSで指定する場合は「#」を付ける
  • クラス:HTMLでは「class=”○○”」と書き、CSSで指定する場合は「.」を付ける
  • CSSで複数個ID名・クラス名を指定することができる
  • 名前を付けるときに英数字、「-」「_」は使えない(英数字推奨)
  • CSSではIDが優先される
  • 同じID名はページ内に1つしか付けられない

初めの内はコードを書いて、確認のためにブラウザで表示させても、うまくスタイルが反映されないことがあると思います。

ニシドラ
ニシドラ

僕の経験上、大抵スペルミスや「 : 」と「 ; 」の付け間違い、「 ; 」の付け忘れなどが考えられます。このほかにも、「_(スペース)」が、かな文字になっているということもあるので、よく確認してみてください。

今回解説したことを覚えることでCSSで余計なコードを書かなくて済むし、どう書けばいいのかイメージがつくようになるので楽しみながら勉強していきましょう。

当ブログ(ニシドラブログ)では、他にもCSSの使い方について解説しています。

コメント

タイトルとURLをコピーしました