IT・プログラミング雑学

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

ウェブと切っても切れないのがHTMLです。ウェブサイトによって中の仕組みはそれぞれですが、最終的にブラウザでHTMLを表示する必要があるのは変わらない。この時、HTMLと同じくらい大切なのがスタイルシート(CSS)です。このHTMLとCSSを結びつけるのがclassやidというものらしいのです。それぞれどういう目的があり、どう使い分けるかを、会社で使うウェブサイトを作っていたプログラマでもあるライターのwoinaryと一緒に解説していきます。

ライター/woinary

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

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

image by iStockphoto

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

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

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

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

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

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

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

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

\次のページで「おしゃれなウェブに必須?スタイルシートと属性とは」を解説!/

次のページを読む
1 2 3 4
Share: