CSS HTML

HTMLとCSSのidとclassとは？使い方を解説

この記事では、HTMLとCSSのidとclassの違いと使い方について解説します。

idとは？

idはHTML要素に付与される一意の識別子です。

つまり、ページ内で同じidを持つ要素は存在しません。idはJavaScriptなどのスクリプト言語との連携や、特定の要素をスタイル化する際に使用されます。

idは以下のようにHTML要素に付与します。

<div id="myId">...</div>

classとは？

classはHTML要素に付与されるクラス名であり、同じクラス名を複数の要素に付与することができます。

classは複数の要素をグループ化してスタイルを一括で適用するために使用されます。

classは以下のようにHTML要素に付与します。

<div class="myClass">...</div>

idとclassの違いは何か？ 主な違いは以下の通りです。

  • idは一意の識別子であり、各要素に対して一度だけ使用することができます。一方、classは要素に複数回使用することができます。
  • idはJavaScriptなどのスクリプト言語から要素を特定するために使用されることがありますが、classはスタイルの一括適用に主に使用されます。
  • idは特定の要素に対して直接スタイルを適用することができますが、classはグループ化された要素に対して一括でスタイルを適用することができます。

idとclassの使い方の例

以下に具体的な例を示します。

<div id="header">This is the header</div>

<p class="highlight">This paragraph has a highlight class.</p>
<p>This paragraph does not have a highlight class.</p>

上記の例では、idが「header」という値であるdiv要素と、classが「highlight」という値である1つのp要素があります。

これをCSSでスタイル化する場合、以下のようになります。

#header {
  background-color: blue;
  color: white;
  font-size: 20px;
  padding: 10px;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

上記のCSSコードでは、idセレクタ（#header）を使用してidが「header」である要素にスタイルを適用しています。
背景色を青、テキスト色を白、フォントサイズを20px、パディングを10pxに設定しています。

また、classセレクタ（.highlight）を使用してクラスが「highlight」である要素にスタイルを適用しています。
背景色を黄色にし、テキストの太さを太字に設定しています。

このように、idとclassを使用することで要素に特定のスタイルを適用したり、複数の要素をグループ化して一括でスタイルを適用したりすることができます。

まとめ

HTMLとCSSにおけるidとclassは要素の識別とスタイル適用に使用される重要な属性です。

idは一意の識別子であり、要素ごとに一度だけ使用します。
一方、classは複数の要素に同じクラス名を付与することができます。
idは要素の個別のスタイル化やJavaScriptとの連携に使用され、classはグループ化された要素に一括でスタイルを適用するために使用されます。

正確な使い分けを理解し、適切に活用することで、柔軟なウェブページの作成が可能になります。

-CSS, HTML