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との違いについても知っておくことで、使い分けを明確にしましょう。

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

侍テック編集部

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

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー