こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はHTMLとCSSにおけるclassとidの役割について解説します。

classとidとは

classとidとは厳密にはclass属性、id属性といいます。
役割としては簡単にいうとタグに対して名前をつけることが出来ます。
ただ、classとidとではかなり役割が違うので、
それぞれ別個に解説していこうと思います。

classの役割

class属性が付いたHTMLの具体例を見てみましょう。

<header class="header">
    <h1 class="header-logo">ロゴ</h1>
    <nav class="header-nav">
        <ul class="header-list">
            <li class="header-list-item">
                <a class="header-list-item-link" href="#">リンク1</a>
            </li>
            <li class="header-list-item">
                <a class="header-list-item-link" href="#">リンク2</a>
            </li>
            <li class="header-list-item">
                <a class="header-list-item-link" href="#">リンク3</a>
            </li>
        </ul>
    </nav>
</header>

このように全てのタグにclass属性をつけてみました。
タグに中に

class=""

というclass属性の記号を入れてダブルクォーテーションの中に名前を入れています。

そして今回はヘッダーの構成要素ですよ、ということが一目でわかるようにheaderという名前をもとにハイフンを挟んで、

class="header-○○"

のようにheaderの中の〇〇ですよ、いうような命名方法にしています。

では、これで実際にCSSを書いてみましょう。

.header{
    background-color: #2234ff;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-logo{
    background-color: #fff;
    color: #000;
    padding: 10px;
    display: inline-block;
}
.header-list{
    display: flex;
    list-style: none;
}
.header-list-item{
    margin: 0 20px;
}
.header-list-item-link{
    text-decoration: none;
    color: #fff;
}

いかがでしょうか。
過去の記事（第二弾　ヘッダーを作ってみる）
とはセレクタが違いますよね。

実はこちらの方がより良い方法です。
ご覧のみなさん覚えておきましょう。

class属性を指定することのメリット

実はコーディングをしている際、このclassに名前をつけるのって結構面倒くさいんです・・・
ですが、
その面倒くささを補ってあまりあるメリットがあるんです。

1.サイトパフォーマンスが上がる
これ重要ですよね。
サイトを構築するものなら誰しもがユーザーに快適にサイトを使ってほしいと思うものです。
なぜパフォーマンスが上がるかというと、
過去の記事（第二弾　ヘッダーを作ってみる）だと、
セレクタの設定がいくつも親子関係になっています。
これですと、コンピューターは「header」の「ul」の「li」の「a」に対して、
という挙動をします。
これだと処理に時間がかかってパフォーマンスが落ちてしまいます。
なので、あらかじめclass名を決めておいて、
セレクタをシンプルにするとパフォーマンスが上がるのです。
いくら面倒だと思っても「いいものを作るためだ！」と心に念じてコーディングしていきましょう。

2.サイトの管理がしやすくなる
これ重要です。
サイトを構築してしばらくたつと、自分がどうやって作ったのか忘れてしまうなんて、
本当にあるあるです。
さらに構築したサイトを別の担当の方に引き継ぐなんてザラです。
そういったとき一目見てわかりやすいclass名にしておくと、
すぐにサイトの構成を把握出来ますし、
別の担当の方にも理解しやすいです。

idの役割

id属性はclass属性とほとんど同じ意味合いですが、
一つだけ違う特性があります。
それは1つのid名は１ページにつき、1回しか使ってはだめというルールがあります。
まずダメな例を挙げてみます。

◆ダメな例

<header class="header">
    <h1 class="header-logo">ロゴ</h1>
    <nav class="header-nav">
        <ul class="header-list">
            <li id="header-list-item">
                <a id="header-list-item-link" href="#">リンク1</a>
            </li>
            <li id="header-list-item">
                <a id="header-list-item-link" href="#">リンク2</a>
            </li>
            <li id="header-list-item">
                <a id="header-list-item-link" href="#">リンク3</a>
            </li>
        </ul>
    </nav>
</header>

このコードだと、「header-list-item」と「header-list-item-link」がid属性で複数指定されてますね。
これはHTML文法上、ルール違反になります。

◆良い例

<header id="header">
    <h1 id="header-logo">ロゴ</h1>
    <nav id="header-nav">
        <ul id="header-list">
            <li class="header-list-item">
                <a class="header-list-item-link" href="#">リンク1</a>
            </li>
            <li class="header-list-item">
                <a class="header-list-item-link" href="#">リンク2</a>
            </li>
            <li class="header-list-item">
                <a class="header-list-item-link" href="#">リンク3</a>
            </li>
        </ul>
    </nav>
</header>

このコードですと、「header」と「header-logo」と「header-nav」と「header-list」がid属性で指定されています。
が、それぞれ重複せず固有の名前になっていますね。
これはHTML文法上OKなんです。

id属性を指定することのメリット

ここで感の良い方は気付くと思います。
あれ？じゃなんでid属性なんか使うの？全部class属性で良くない？と・・・
はい、その通りです。
ほとんどの場合、class属性を使用することが多いです。
ですが、id属性を使用するメリットもあるんです。

1.JavaScriptのパフォーマンスが上がる
私がid属性を使用する一番の理由はこれですね。
JavaScriptでDOM操作をしたい要素にid属性を指定して、
セレクタをそのid名にすると、class名で指定するよりも格段に処理が早くなるんです。
これは理由があって、class属性だと１ページに複数ある可能性があるので、
コンピューターが全てのclass属性を探してから処理をするのですが、
id属性なら１ページにつき1つというルールがあるので、
コンピューターが迷わず処理ができるんです。

2.ページ内リンクとして使える
みなさんも見た事はあるのではないでしょうか。
あるボタンをクリックしたら、
ページの特定の箇所に自動的にスクロールするようなもの。
それがアンカーリンクです。
ちなみにこんな感じに記述します。

<a href="#bottom">ページ下部へ</a>

これはリンクするためのボタン。

<div id="bottom">ページ下部</div>

これがリンク先です。

まとめ

idとclass、コーディングする上でお互いの役割・特性をはっきりと理解して、
ちゃんと使い分けていきましょう！