HTMLのclassについてidとの違いなどを解説!

今回はHTMLで使われるclassの使い方について解説をしていきます!HTMLのタグで使われるclassが何を意味しているのか、分からない初心者の方もいるのではないのでしょうか?この記事では、

  • classとは
  • classの使い方
  • 一つのタグで複数のclassを使う方法
  • classとidの違い

について解説をしていきます。わかりやすいコードを交えて解説していくのでぜひ、ご覧ください!

classとは

それではclassとは何かを解説していきます。classはHTMLのタグに属性として用意されています。

そしてこのclassを目印にして、CSSやJavaScriptで装飾やいろいろなプログラムを実行させます。

classの使い方

それでは早速、簡単なclassの使い方について見ていきましょう。こちらのコードをご覧ください。

<style>
    .text {
        color: blue;
    }
</style>

<html>
    <p class="text">テキストテキストテキストテキストテキスト</p>
</html>

実行結果

ここでは段落を表すpタグに対して、「class="text"」を適用させています。

そこでCSS上では文字の色を変えるために、textというclassが適用されているものに対して実際にCSSを適用させています。このようにclassは何かの目印として使われています。

一つのタグで複数のclassを使う方法

classは一つのタグに一つだけというわけではなく、複数のタグを付けることも出来ます。こちらのコードをご覧ください。

<style>
    .text {
        color: blue;
    }
    .isOpen {
        text-decoration: underline;
    }
</style>

<html>
    <p class="text">テキストテキストテキストテキストテキスト</p>
    <p class="text isOpen">テキストテキストテキストテキストテキスト</p>
    <p class="text">テキストテキストテキストテキストテキスト</p>
</html>

実行結果

このコードでは2つ目のpタグの行に、「isOpne」というclassを追加しました。「isOpen」ではアンダーラインを付けるという装飾を指定していますが、実際に装飾されていることが分かるかと思います。

このような指定はHTMLやCSSだけで現在開いてるページを明確にするためによく使われているので覚えておきましょう。

classとidの違い

ここでclassによく似たidについても知っておきましょう。classは先程のコードのように何回でも同じ名前のものを使うことが出来ます。しかし同じidは1ページに1つしか使うことが出来ません。

classはスタイルを統一させるためによく使われますが、idではヘッダーやフッター、サイドバーなどの1つのページに1つしかないものに対して使いましょう。

また、idはリンク先としても使うことが出来ます。ページのタイトルに対してidをつけ、目次をリンクにして移動先をページ内のそのidに指定すると簡単に目的のページまで飛ぶことができます。

まとめ

この記事ではHTMLでよく使われるclassがどういったものなのか、解説してきました。classが使われる場面については分かっていただけたでしょうか?

CSSやJavaScriptとHTMLを連携させるときには必須の属性になります。またidとの違いについても知っておくことで、使い分けを明確にしましょう。

Writer

侍テック編集部

株式会社SAMURAI

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。侍テック編集部では技術系コンテンツを中心に有用な情報を発信していきます。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら