HTMLのid属性とclass属性の値【ウェブデザイン技能検定 1級学科範囲】

2024年7月21日 2024年7月21日 8分

タスラ t3l

HTML（HyperText Markup Language）では、要素に特定の識別子を付与するためにid属性とclass属性を使用します。
今回は、ウェブデザインの中でもかなり基本的な部分になりますが、ウェブデザイン技能検定の1級でも学科の範囲内となっている、id属性とclass属性の違いと、それぞれの値に関する詳細なルールについて解説します。

当たり前になっている方なども、この機会に見直す為になどにこの記事をしよういただけたら嬉しいです。

1 id属性とは
2 class属性とは
3 id属性とclass属性の違い
4 id属性とclass属性の値のルール
5 空白の使用に関する詳細
6 実践例
7 まとめ

id属性とは

id属性は、HTML要素に一意の識別子を付与するために使用されます。
この識別子は、CSSやJavaScriptから要素を特定する際に非常に重要です。

基本的な使用例

<div id="uniqueID">コンテンツ</div>

この例では、div要素にid="uniqueID"を設定しています。このidを用いてCSSやJavaScriptからこの要素を特定できます。

class属性とは

class属性は、HTML要素に共通の識別子を付与するために使用されます。
複数の要素に同じクラス名を付与することで、グループとしてスタイルやスクリプトを適用できます。

基本的な使用例

<div class="commonClass">コンテンツ1</div>
<div class="commonClass">コンテンツ2</div>

この例では、二つのdiv要素に同じクラス名commonClassを設定しています。

id属性とclass属性の違い

一意性と複数性

id属性: 文書内で一意でなければならない。つまり同じidを持つ要素は一つだけです。
class属性: 複数の要素に同じクラス名を付与することができます。

使用目的

id属性: 特定の一つの要素を識別し、スタイルやスクリプトを適用するために使用されます。
class属性: 複数の要素をグループ化し、共通のスタイルやスクリプトを適用するために使用されます。

id属性とclass属性の値のルール

id属性の値

一意性: id属性の値は文書内で一意でなければなりません。
空白を含まない: id属性の値には空白を含めることはできません。これは文法エラーとなります。

例

<!-- 正しい例 -->
<div id="header">ヘッダー</div>

<!-- 誤った例（空白を含む） -->
<div id="main content">メインコンテンツ</div> <!-- 文法エラー -->

class属性の値

複数のクラス名: class属性の値には複数のクラス名を空白で区切って設定できます。
空白の使用: クラス名自体には空白を含めることはできませんが、クラス名を区切るために空白を使用できます。

例

<!-- 正しい例 -->
<div class="mainContent primary">メインコンテンツ</div>

<!-- 誤った例（クラス名に空白を含む） -->
<div class="main content">メインコンテンツ</div> <!-- 文法エラー -->

空白の使用に関する詳細

id属性の空白
id属性の値に空白を含めることはできません。空白を含むと、CSSやJavaScriptでの操作が意図しない結果を招く可能性があります。空白を含むid属性は文法エラーとなり、HTMLの整合性を損ないます。

class属性の空白
class属性の値に空白を使用する場合、それはクラス名を区切るためのものです。複数のクラス名を空白で区切ることで、一つの要素に複数のクラスを適用できます。

例

<!-- 複数のクラス名を適用 -->
<div class="class1 class2">複数クラス適用</div>

この場合、要素にはclass1とclass2の両方のスタイルが適用されます。

実践例

id属性の実践例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>id属性の例</title>
    <style>
        #uniqueID {
            color: blue;
            background-color: lightgrey;
        }
    </style>
</head>
<body>
    <div id="uniqueID">これは一意のidを持つ要素です</div>
</body>
</html>

class属性の実践例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>class属性の例</title>
    <style>
        .commonClass {
            color: red;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="commonClass">これは共通のクラスを持つ要素1です</div>
    <div class="commonClass highlight">これは共通のクラスと追加のクラスを持つ要素2です</div>
</body>
</html>

まとめ

id属性とclass属性は、HTML文書において要素を識別するための重要な属性です。
id属性の値は一意でなければならず、空白を含めることはできません。
一方、class属性の値は複数のクラス名を空白で区切って設定でき、要素をグループ化するために使用されます。
これらのルールを理解し、適切に使用することで、HTML文書の整合性と可読性を保ちつつ、効果的なスタイルとスクリプトの適用が可能となります。
ウェブデザイン技能検定においても、このような基本的なHTMLのルールを理解し、適切に使用することが求められます。