HTML5 CSS3

HTMLにおいてclass名とID名を分ける違いってなに？

HTMLでのclass名とID名は、HTML要素にスタイルを適用するために使用されます。

  • class名：複数のHTML要素に同じスタイルを適用するために使用されます。class名は複数の要素で使用することができます。class名はHTML要素の中で「class」属性として定義されます。
  • ID名：1つのHTML要素だけに適用するスタイルを適用するために使用されます。ID名はページ内で一意である必要があり、同じID名は同じページ内で2回以上使用することはできません。ID名はHTML要素の中で「id」属性として定義されます。

従って、class名は複数のHTML要素に同じスタイルを適用するために使用されますが、ID名は1つのHTML要素だけに適用するスタイルを適用するために使用されます。

要するにclass名は複数のhtml要素で同じ名前を使えるのに対して、

ID名は一つのHTML要素にだけ使えるってことなんですね。

class名書き方

<div class="class_name">hello</div>
.class_name {
  background-color: yellow;
  font-weight: bold;
}

ID 名書き方

<div id="main-title">hello</div>
#main-title {
  font-size: 36px;
  color: blue;
  text-align: center;
}

-HTML5 CSS3