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

2024年5月6日

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

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

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

HTMLのclassの使い方について理解が深まったでしょうか？Web制作において、classの効果的な活用は重要なスキルです。しかし、「自分一人で習得するのは難しい」と感じる方もいるかもしれません。そんな時は、専門的なサポートを活用することで、効率的にスキルを身につけることができます。

実践的なスキルを学べる環境を利用することで、AIを活用したWeb制作で収益を得る具体的な方法を学ぶことができます。実務に直結したノウハウを得られるため、すぐに活用できるのが魅力です。

少しでも興味がある方は、まずはセミナーの詳細を確認して、自分に合った学び方を見つけてみませんか？

セミナーの詳細をみる

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>

実行結果