【HTML入門】 classとid属性の役目と違い

2022年2月3日2022年2月17日 souki202 タグ属性

HTMLには、ほぼすべてのタグに対してclassとid属性が設定できます。この記事で、classとidのそれぞれの特徴や使い方を紹介します。

classは、主にCSSでの修飾対象の絞り込みや、Javascriptと合わせて処理したいときに

idは、上記に加え、リンクの飛び先にも指定できるようになります。

1 class
- 1.1 指定方法
2 id
- 2.1 指定方法
- 2.2 idを利用したリンクの貼り方
3 特徴を整理
4 まとめ

class

classを設定する意味は、次の2つが主です。

CSSのセレクタに利用する
1つの規則で、複数箇所に同じ見た目を適用できる
Javascriptで要素を取得するための絞り込みに利用する

どちらにも利用しない場合、通常はクラスは不要です。

指定方法

classは、スペース区切りで複数個指定できます。

<div class="abc-def hogehoge fuga">
    ...
</div>

この場合、このdivタグはabc-def、hogehoge、fugaの3つのクラスに属しています。

classは、複数箇所に同じ名前を何度でも指定できます。

<div class="abc-def hogehoge fuga">
    ...
</div>

<!-- 2回目のhogehoge -->
<main class="hogehoge">
    <!-- 2回目のfuga -->
    <p class="fuga">...</p>
</main>

また、class名は単語をハイフンでつなぐのが一般的です。例えば、text-item、card-title、my-sample-class-hoge-fugaなどで、単語と単語をハイフンでつなぎます。

このような名前の付け方を、ケバブケース(kebab-case)と呼びます。

id

idを設定する意味は、次の3つが主です。

CSSのセレクタに利用する
Javascriptで要素を取得するための絞り込みに利用する
リンクに指定した際に、ページの表示位置をその要素の位置にする

特に3つ目がidの特徴で、ページを移動した際に、特定の場所に移動した状態で表示することができます。

例えば、この記事の目次のリンクをクリックすると、その場所に飛びますよね。これもidとリンクと組み合わせた方法です。

指定方法

idは、Webページ内で同じ名前を使用することはできません。

<header>
    <nav id="headerNav">
        ...
    </nav>
</header>

<div id="app">
    ...

    <section id="sec2">
        <h2>sec2のタイトル</h2>
        ...
    </section>

    <ul>
        <!-- sec2のidがある場所にスクロールした状態にできるリンク -->
        <li><a href="#sec2">section2のリンク</a></li>
    </ul>
</div>

<!-- NG 同じ名前は利用できない -->
<!-- <main id="app"></main> -->

また、id名は2つ目以降の単語の頭文字を大文字にしてつなぐのが一般的です。例えば、headerNav、myApp、fooBarHogeFugaなどです。

このような名前の付け方を、キャメルケース(camelCase)と呼びます。

idを利用したリンクの貼り方

ページのURLの後に#id名とすると、そのリンクをクリックしたときに最初からページがスクロールした状態で表示されます。

例えば、

<header>
    <nav id="headerNav">
        ...
    </nav>
</header>

<div id="app">
    ...

    <section id="sec2">
        <h2>sec2のタイトル</h2>
        ...
    </section>

    <section id="sec3">
        <h2>sec2のタイトル</h2>
        ...
    </section>
    <ul>
        <!-- sec2のidがある場所にスクロールした状態にできるリンク -->
        <li><a href="#sec2">section2のリンク</a></li>
    </ul>
</div>

というHTMLがあったとすると、<a href="#sec2">section2のリンク</a>をクリックすると、<section id="sec2">...</section>の頭の部分に移動します。

このページでも、記事の最初の方にある見出しでidを用いたリンクが使われています。

他のページに飛びつつスクロールした状態にする場合、

<a href="/hoge/fuga#aaa">...</a>
<a href="https://example.com/hoge#bbb">...</a>

<!-- wordpressなど、末尾がスラッシュの場合でもその後に#idを続ける -->
<a href="/hoge/fuga/#ccc">...</a>

とすると移動できます。