40代高卒者が製造業からIT転職する【idと class】

こんにちは、フローです。

今回はまたHTMLに戻り、”id”タグと、”class”タグの使い分けの事を書きたいと思います。

私も最初は、「えっ、どっち使えばいいの？」でしたが、

慣れるとそこまで考えずに使っています。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【リセットCSS】

1 HTMLの”id”と”class”とは
2 “id”と”class”の例
- 2.1 Classの例
3 まとめ

HTMLの”id”と”class”とは

要素を特定するための属性ですが、それぞれ異なる使い方があります。

“ID”属性は、一意の要素を特定するために使用されます。

つまり、同じIDを持つ要素は文書内に1つしか存在しないことが保証されます。

このため、JavascriptやCSSなどで特定の要素を操作する際に非常に便利です。

一方、”class”属性は、同じスタイルを複数の要素に適用したい場合に使用されます。

同じクラス名を持つ要素は、複数の場所に存在することができます。

例えば、ウェブページ内にある複数のボタンに同じスタイルを適用する場合、

それらのボタンに共通のクラス名を付け、CSSでそのクラス名を指定することで、

全てのボタンに同じスタイルを適用することができます。

したがって、

“ID”属性は、一意の要素を特定するために使用され、

“class”属性は、複数の要素に共通のスタイルを適用するために使用されます。

適切に使用することで、コードの可読性や保守性を向上させることができます。

“id”と”class”の例

先に結論から言うと、「どちらを使ってもいい」です。

しかし、せっかくブログなので書いていきます。

IDの例

・ページ内の一意の要素を特定する場合

例えば、ページ内のヘッダーやフッターなど、一度だけ表示される要素を特定する場合にIDを使用します。

<header id="page-header">...</header>
<footer id="page-footer">...</footer>

みたいな。

JavaScriptで要素を特定する場合

例えば、ボタンクリック時にフォームの値を取得する場合などに、IDを使用します。

<button id="submit-btn" onclick="submitForm()">送信</button>
<script>
function submitForm() {
  var form = document.getElementById("my-form");
  var name = form.elements["name"].value;
  // ...
}
</script>

みたいな。

Classの例

・複数の要素に同じスタイルを適用する場合

例えば、複数のボタンに同じスタイルを適用する場合に、classを使用します。

<button class="btn">ボタン1</button>
<button class="btn">ボタン2</button>

的な。

CSSで特定の要素をスタイリングする場合

例えば、特定の要素だけにスタイルを適用する場合に、classを使用します。

/* ボタン全体にスタイルを適用 */
.btn {
  background-color: blue;
  color: white;
}
/* 特定のボタンにスタイルを上書き */
.btn.special {
  background-color: red;
}

的な。

JavaScriptで複数の要素を特定する場合

例えば、クリックイベントを持つすべての要素を取得する場合などに、classを使用します。

var buttons = document.getElementsByClassName("btn");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    // ...
  });
}

てな感じで。

上記の例では、

classが”btn”であるすべての要素を取得し、

forループを使用して各要素にクリックイベントを割り当てています。

これにより、クリックイベントを持つすべての要素に対して同じ処理を実行することができます。