【html&css実践 #5】idとclassとは?違いと使い方を徹底解説!

【実践】html&css

こんにちは!
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです!
Webデザイナーってどんな仕事内容?これからWebデザイナーに挑戦したい!という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています!

今回は、idとclassについてです。
違いと使い方を解説します。
idとclassは、コーディングする上で絶対覚える必要があるので、基本をマスターしましょう。

YouTubeにもアップしていますので、見ていただけたら嬉しいです!

idとclassとは?

idとclassとは、それぞれ属性で、htmlのタグに追加することができるものです。

属性とは、htmlのタグに色々な効果を追加できるものです。
前回のhtmlで言うと、hrefが属性になります。

<a href="https://www.good-f-design.com/html-css-practice-01/">前回の#1</a>

上記コードのように、idとclassも同じように属性として追加することができます。

<body>
    <div>
        <h1 id="title">タグを使ってhtmlコーディングしよう!</h1>
        <p class="lead">
            こんにちは<br>
            ユウです!
        </p>
    </div>
    <p>
        <a href="https://www.good-f-design.com/html-css-practice-01/">前回の#1</a>では、htmlの概要説明をしました。<br>
        今回の#2では、タグを使ってhtmlコーディングをしていきます。
    </p>
</body>

h1タグとpタグにidとclassを追加しました。

値の「title」と「lead」は、任意の文字列でOKです。
ただ、数字から始まる文字列はNGなので、半角英字から始まる分かりやすい名前にしましょう。

「01-title」「2-text」など、idとclassは数字から始まる文字列はNG!
半角英字から書くと覚えておこう!

idとclassの違い

idとclassの違いは、大きく2つあります。

idclass
使用回数1回複数回
優先度高い低い

使用回数

idは、同じ名前のidはページ内で1回しか使えません。
classは、同じ名前のclassをページ内で何回でも使えます。

<!-- idの複数回はNG -->
<div>
    <h1 id="title">タグを使ってhtmlコーディングしよう!</h1>
    <p id="title">
        こんにちは<br>
        ユウです!
    </p>
</div>
<!-- classの複数回はOK -->
<div>
    <h1 class="title">タグを使ってhtmlコーディングしよう!</h1>
    <p class="title">
        こんにちは<br>
        ユウです!
    </p>
</div>

優先度

同じタグにidとclassの両方がある場合、idが優先されます。

<!-- idが優先される -->
<div>
    <h1 id="title" class="text">タグを使ってhtmlコーディングしよう!</h1>
    <p>
        こんにちは<br>
        ユウです!
    </p>
</div>

他にも違いはありますが、この2つの違いを覚えておきましょう。

idとclassの使い方

説明で記述の仕方は触れましたが、実際にどのようにして使うか解説します。

idとclassの主な使い方は、スタイルを個別に適用させるために使います。
コードを使って説明します。

<body>
    <div>
        <h1 id="title">タグを使ってhtmlコーディングしよう!</h1>
        <p class="lead">
            こんにちは<br>
            ユウです!
        </p>
    </div>
    <p>
        <a href="https://www.good-f-design.com/html-css-practice-01/">前回の#1</a>では、htmlの概要説明をしました。<br>
        今回の#2では、タグを使ってhtmlコーディングをしていきます。
    </p>
</body>
@charset "utf-8";

div {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 30px;
}
h1 {
    text-align: center;
    color: #ff0000;
    font-size: 40px;
    margin: 50px 0 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #cccccc;
}
p {
    font-size: 18px;
    text-align: center;
}

前回の#4のcssです。
このh1タグをid名に変更してみます。

@charset "utf-8";

div {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 30px;
}
#title {
    text-align: center;
    color: #ff0000;
    font-size: 40px;
    margin: 50px 0 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #cccccc;
}
p {
    font-size: 18px;
    text-align: center;
}

id名に変更しました。
保存してブラウザで確認すると、変わらずスタイルが適用されていると思います。

次は、pタグをclass名に変更してみます。

@charset "utf-8";

div {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 30px;
}
#title {
    text-align: center;
    color: #ff0000;
    font-size: 40px;
    margin: 50px 0 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #cccccc;
}
.lead {
    font-size: 18px;
    text-align: center;
}

保存してブラウザで確認すると、「こんにちはユウです!」のテキストだけスタイルが適用されていると思います。

解説

順番に解説します。

「#」「.」と先頭につける

cssにid名とclass名を記述するときは、idのときは「#」、classの時は「.」を先頭につけます。
深く考えず、記述のルールとして覚えましょう。

タグではなく、id名とclass名に変更したわけ

変更前はタグに対してスタイルを記述していましたが、id名とclass名に変更しました。
ここが、idとclassを使用する1番重要なところになります。

idとclassを使用することで、スタイルを個別に適用させることができます。

h1タグはページ内で1つしかないので、idに変更しても表示は変わらずあまり意味がありませんが、pタグはページ内に2つあります。

変更前はpタグにスタイルを記述していたので、ページ内の全てのpタグにスタイルが適用されていましたが、classに変更すると、そのclassがあるタグにだけスタイルを適用させることができます。

idとclassがないと、同じタグに同じスタイルが適用されてしまうので、デザイン通りにコーディングすることができなくなってしまいます。

このように、idとclassを使って個別にスタイルを記述してコーディングをしていきます。

注意点

idとclassの使い方で注意したいことがあります。

idに関しては、同じidはページ内で1つしか使えないので、他でも使用しそうなスタイルの場合は、classで書くようにしましょう。

もうひとつは、何でもかんでもタグにidとclassをつけてはいけません。
表示上は問題ありませんが、全てのタグにidとclassがあると、それだけcssの記述が多くなり、管理も大変になってしまいます。
それに、ごちゃごちゃしてしまいソースコードが汚く見えてしまいます。

タグとclassを上手く使い、無駄のない管理しやすいコードにすることが上達する近道です。

最後に

以上、idとclassの違いと使い方について解説しました。

idとclassはとても便利で重要です。
htmlコーディングには必ず必要になるので、しっかり身につけましょう。

次回もcssについて、タグとclassの効率良いスタイルの記述方法について解説したいと思います。

最後までお読みいただきありがとうございました!
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです!
何か気になること等あればお気軽にコメントください。

コメント

タイトルとURLをコピーしました