HTMLでは、要素にさまざまな属性を追加して、見た目や振る舞いを指定することができます。ここでは、クラス、ID、スタイルという属性について学んでみましょう。

クラス属性の使い方

クラス属性は、同じスタイルを複数の要素に適用したり、JavaScriptで要素を操作したりするときに便利です。

クラス属性の書き方

<p class="red-text">赤いテキストです</p>
<p class="red-text">もう一つの赤いテキスト</p>

ID属性の使い方

ID属性は、ページ内で一意の識別子を要素に割り当てるために使います。JavaScriptで特定の要素を操作するときに使われることが多いです。

ID属性の書き方

<div id="header">
  <h1>ここはヘッダーです</h1>
</div>

スタイル属性の使い方

スタイル属性は、その要素に直接スタイルを適用するために使います。CSSで指定するプロパティと値を直接記述します。

スタイル属性の書き方

<p style="color: blue; font-size: 16px;">青色で大きなテキストです</p>

まとめ

クラス、ID、スタイル属性は、HTML要素に追加して要素の見た目や振る舞いを指定するための重要なツールです。クラスは複数の要素に同じスタイルを適用する場合に使い、IDはページ内で唯一の要素を識別するときに使います。スタイル属性は、その要素自体に直接スタイルを適用したいときに便利です。

これらの属性を使いこなすことで、より見やすく魅力的なWebページを作成することができます。ぜひ実際に試してみて、自分のページをカスタマイズしてみましょう！