HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【初心者向け】HTMLのclass属性とは？使い方をサンプルコードで解説

HTMLのclass属性とは？

HTMLのclass属性は、要素に1つ以上のクラス名を設定するためのグローバル属性です。設定したクラス名をもとに、CSSでスタイルを適用したり、スタイルシート内で対象の要素を指定したりできます。

同じクラス名はページ内の複数の要素に共通して付与できるため、複数の要素にまとめて同じデザインを適用したい場合に非常に便利です。また、JavaScriptで特定の要素を取得する際にも広く活用されています。

class属性の実装例

それでは、HTMLでclass属性を使用する具体的な例を見てみましょう。ここでは、<h2>要素に「demo」というクラス名を設定し、CSSで文字色と背景色を定義しています。

<!DOCTYPE html>
<html>
<head>
<style>
h2.demo {
    color: orange;
    background-color: black;
}
</style>
</head>
<body>
<h1>学習リソース</h1>
    <h2 class="demo">テキストチュートリアル</h2>
    <h2 class="demo">動画チュートリアル</h2>
    <h2 class="demo">面接対策Q&amp;A</h2>
    <h2 class="demo">オンラインクイズ</h2>
</body>
</html>

出力結果

このコードをブラウザで表示すると、4つの見出しがすべて「黒い背景＋オレンジ色の文字」で描画されます。

【初心者向け】HTMLのclass属性とは？使い方をサンプルコードで解説

コードの解説

上記の例では、<h2>要素に対して次のようにクラス名「demo」を設定しています。

<h2 class="demo">テキストチュートリアル</h2>
<h2 class="demo">動画チュートリアル</h2>

続いて、スタイルシート側ではセレクター「h2.demo」を使って、該当する要素の文字色（orange）と背景色（black）をまとめて指定しています。

h2.demo {
    color: orange;
    background-color: black;
}

ポイント：複数のクラス名を指定することも可能

class属性は、スペースで区切ることで1つの要素に複数のクラス名を同時に指定できます。例えば class="demo highlight" のように記述すれば、複数のスタイルを組み合わせて柔軟にデザインを管理できます。

  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以