簡単でわかりやすい！HTMLのidとclassの違いとは？目的や使い分けをプログラマーがわかりやすく解説

ライター／woinary

某社で社内向け業務システムの開発、運用を30年近くやっていたシステム屋さん。ウェブを使ったシステム開発にも長年関わってきました。現在はフリーランス。ガジェットやゲーム、ラノベが大好きなおっさんです。

HTMLの要素と属性とは？id属性とclass属性の使い方

image by iStockphoto

日々欠かせないウェブサイトやウェブサービス。そのウェブに欠かせないのがHTMLです。HTMLを使いこなすためには要素と属性が重要。要素とは"<h1>見出し</h1>"や"<p>何か</p>"のような前後に不等号がついたタグで囲まれている部分です。属性は"<input name="button">"のようにタグの中で”名前=値”というもの。この属性にはさまざまなものがありますが、特によく使われるものを2つ挙げるとidとclassです。

ざっくり言えばidは学生番号、classは学年や専攻のような分類になります。これだけではよくわかりませんよね。ここでは違いや使い方について解説していきます。

HTML5とXHTMLの違いとは？HTMLの歴史やXMLとの関係までプログラマーがわかりやすく解説

簡単でわかりやすい！PHPとHTMLの違いとは？静的と動的？仕組みや特徴もプログラマーが詳しく解説

id：個々の要素を識別する一意の名前

idという言葉はウェブやHTMLとは関係ないところでも聞いたことがあるかと思います。例えば、学生や会社員のID。身分証明書のことで、英語の「Identity Document」の略です。学生や会社員が校内、社内に入るために警備員に見せるIDカード（学生証、社員証）というものもありますよね。

HTMLのid属性もこれに似ています。ウェブサイトには多くの入力欄や表や画像などの項目がありますよね。この項目それぞれを区別するために使うのがid属性です。区別するためのものですから、通常は1つのウェブ画面の中では同じid属性は1つだけ。学生番号や社員番号が通常は個人ごとに違うのと同じです。

class：要素の分類を表す名前、一意でなくて良い

classとはそのままクラスのこと。日本語にすると分類や等級、階級などさまざまな意味があります。その中でも一番イメージしやすいのは学校のクラスでしょうか。小学校ならば1年から6年まであり、それぞれクラスに分かれていることが多いです。

HTMLのclsas属性も学校のクラスに似ています。いくつもある項目をあるルールでまとめたものがclassです。例えば、ショッピングサイトなどで買い物するためにさまざまな情報を入力しますよね。その中でも住所のところは「住所」というclass、クレジットカード情報は「カード情報」というclassと分類することも可能です。何のためにclassを決めて、そこにどんなメリットがあるのかは後で説明します。まずはclassとは何かのルールでまとめた分類と覚えてください。

おしゃれなウェブに必須？スタイルシートと属性とは

image by iStockphoto

今のウェブサイトはどれもおしゃれです。20年前の「テキストサイト」などから見ると同じWebサイトには見えないほど。そんなウェブサイトはどうやってつくるのでしょう。ウェブサイトにはHTMLが欠かせないと書きましたが、おしゃれなウェブサイトに欠かせないものがもうひとつ。それがスタイルシートです。英語ではCascading Style Sheetsといい、CSSと略します。

このスタイルシートを使う場合にも重要なのが属性です。特にclass属性はスタイルシートで使うのが主な使い方。ここではスタイルシートとHTMLの違いや、それと属性の関係を説明します。

5分で分かる！HTMLとCSSの違いとは？定義や役割・読み込み方も現役エンジニアがわかりやすく解説

CSSスタイルシートの「id」と「class」の違いは？使い分けや記述方法・優先順位も元企業ホームページ担当がわかりやすく解説

簡単でわかりやすい！CSSの「.（ドット）」と「#（シャープ）」の違いとは？Web制作の基本を現役システムエンジニアが詳しく解説

構造とデザイン？HTMLとスタイルシート(CSS)の違い

スタイルシートとは名前の通り、ウェブサイトの見た目（スタイル）を書いたものです。しかし、なぜHTMLとは別にスタイルシートが必要なのでしょう。実は、昔はHTMLの中で色を変えたり、文字を太くしたり、下線を引いたりといった文字の飾りもすべてタグで指定していました。

ただ、ウェブの進化に従って、さまざまなことをしたくなりました。その度に、HTMLにタグを追加していると大変。それだけが理由ではありませんが、HTMLでは見出しがあって、本文があってといった文書の枠組みだけを書くことにしました。一方、見た目に関することはスタイルシートに分けたのです。この文書の枠組みのことを「構造」、見た目を「デザイン」と呼びます。2000年以降は構造とデザインを分けるのが主流です。

昔は大変だった？スタイルシート登場前のデザインとは

スタイルシート登場前は、デザインもHTMLのタグとして指定していました。例えば、文字を太字にする場合、太字にしたいところをすべて「<b>太字</b>」のように書く必要があります。同じように色を変える場合も、下線を引く場合もすべてタグで書くのです。重要なキーワードを赤文字にしていたが、やはり青の太字に変えたくなった場合、該当箇所を探して書き換える必要があります。変え忘れてしまうとそこだけ赤文字で残っていたりと恥ずかしいことに。

また、この記事でも大見出しと、その中の小見出しではデザインが違いますよね。このような場合、それぞれにデザインを指定する必要があります。何となく大変そうというイメージがわいたでしょうか。

分けると便利？構造とデザインを分ける訳

では分けるとなぜ便利なのでしょう。デザインは変更することもよくあります。今は青い四角に白文字で書いてあるタイトルを、赤い四角に黄色い文字に変更することもあるかもしれませんよね。その時、「ここは見出しです」という指定と、「見出しは青い背景に白い文字で書く」という指定が分かれていると、変更が簡単です。

文章の構造は一度書くとそう変更することはないですが、デザインを変えたいことはよくあります。文章を考えるときに全体の構成を考えてから書くことも多いですよね。その際、デザインのことまで考えていたら混乱してしまいます。ですので、分けて考えるわけです。

どう使い分ける？id属性とclass属性

image by iStockphoto

ここまでウェブを構造を書くHTMLと、デザインを書くスタイルシートに分けるという話をしてきました。それとid属性やclass属性はどう関係するのでしょう。このデザインに関係するのは主にclass属性です。id属性もデザインに使うことはありますが、メインはclass属性。その違いは何か、どう使い分けるのかを最後に説明します。

idを使うもの：特別扱いしたいもの限定

id属性を使うのはウェブサイトの画面の中でもとくに注目してもらいたいものです。典型的なものは送信ボタン。また、ショッピングサイトで住所や氏名、クレジットカードの番号を入れる項目や、SNSならばメッセージなど。ウェブの中でも意味があって、他と違うものは、それを区別するためにid属性を指定することが多いです。

一方で、この記事の文章のようなものは特別な意味はないのでid属性は使いません。使用禁止ということはないですが、id属性は区別できるものに使うので同じ名前は使えません。名前をつける必要がないものに名前をつけても無駄ですよね。筆箱の鉛筆やシャーペンの1本1本に太郎や次郎と区別できるようにいちいち名付けないのと同じです。

classを使うもの：基本的には全部

ではclass属性は何に使うのでしょう。最初の説明でclassは分類と説明しましたよね。例えば、「一段目の見出し」、「二段目の見出し」というのも分類の一種です。また、表を見やすくするために偶数行と奇数行で色を変えることもありますよね。これも「表の奇数行」と「表の偶数行」という分類で分けることができます。

学校のクラスがclassだと説明しましたが、例えば男子のグループと女子のグループ、学級委員などの役割がある人とない人、クラスの中のグループ分け、今日の日直など分類法はさまざま。その分類に名前をつけてわかりやすくしたものがclass属性です。

分類は必要に応じてありとあらゆるものに使います。ですので、class属性も必要ならばどこにでも使うことができます。

併用すべき？idとclassは目的が違う

id属性とclass属性のイメージがつかめましたか。学校のクラスを例にすると、id属性は氏名や学生番号といった誰なのかを区別するものです。一方、男女別や学級委員をしているか、今日の日直かどうかといった、その生徒をグループ分けするものがclass属性。目的が違うので、必要ならば併用することもできます。

同じように、ウェブサイトの中にあるものも、特別な意味があるのでひとつひとつ区別するようなもに使うのはid属性。一方、ひとつひとつ区別する必要はないが、いくつかのグループに分かれるもので、そのためにデザインを変えるものはclass属性を使います。例えば、テストの成績表。この中で、30点以下は赤点なので点数を赤字で表示する、とします。その場合、30点以下の点数のclass属性には赤点であるという意味で「class="akaten"」などと指定するわけです。

idは特別なもの、classはデザインの単位で分ける

2000年以降のウェブサイトやウェブサービスではHTMLとスタイルシートを使うのが主流です。class属性は主にHTMLとデザインを結びつけるために使います。ウェブ画面のそれぞれの項目にひとつひとつ個別にデザインを指定すると面倒です。また後で変更するのも大変。そのため、ここはこういうデザインという分類だけHTMLの中に書いておきます。その分類ごとの細かいデザインはスタイルシートに分けておくと簡単にデザイン変更可能です。また、プログラマとデザイナーの役割分担などのメリットも。

一方、意味があって区別が必要なものに個別の名前をつけるのがid属性。区別するものなので一対一で使います。デザインを指定することに使うこともありますが、プログラムで使うことが多いものです。