id属性やclass属性を使ってCSSを適用させよう

id属性とは、特定の箇所にCSSを適用するために使用する属性です。

id属性は同じページ内に1つしか使用できないというルールがあります。

id属性を使ってCSSを適用させるには、下記の画像のように id属性 を # で書いてあげる必要があります。

id名については同じものを書いてください。

それでは、id属性を使ってCSSを適用させる方法と表示の方を確認していきましょう。

<div id="text-red">id属性を使ってCSSを適用させます。</div>

#text-red {
　color: red;
}

上記のようにid属性を使ってCSSを適用させるには

# を使ってid名を書くことで、CSSを適用させることができます。

class属性とは、特定の箇所にCSSを適用するために使用する属性です。

id属性と違って、class属性は同じページ内で何回も使用することができます。

そのため、CSSを再利用するのに向いています。

class属性を使ってCSSを適用させるには、下記の画像のように class属性 を . で書いてあげる必要があります。

class名については同じものを書いてください。

それでは、class属性を使ってCSSを適用させる方法と表示の方を確認していきましょう。

<div class="text-red">class属性を使ってCSSを適用させます。</div>

.text-red {
　color: red;
}

上記のようにclass属性を使ってCSSを適用させるには

. を使ってclass名を書くことで、CSSを適用させることができます。

この記事ではid属性やclass属性を使ってCSSを適用させる方法について解説しました。

押さえておきたいポイントは下記の2つです。

それぞれの属性を理解して使い分けていきましょう。

最後までお読みいただきありがとうございます。