簡単でわかりやすい！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とは何かのルールでまとめた分類と覚えてください。
桜木建二
ウェブページのHTMLはタグで区切られたさまざまな要素でできている。学校に多くの生徒がいるのと同じだな。それぞれの学生には学生番号などの個人を特定できる番号などが振られていることが多い。それがid属性だ。その生徒はクラスでまとめられているな。そのような分類がclass属性だ。次にこれらが何のためにあってどう使うかを見ていくぞ。
＼次のページで「おしゃれなウェブに必須？スタイルシートと属性とは」を解説！／
おすすめの記事
Related Posts
