HTML で div タグを使う場合、単純に要素を囲むだけではなく、class や id を指定して CSS や JavaScript から扱うことが多くあります。
しかし、初心者の方の中には、
「divにclassを書く理由が分からない」
「classとidは何が違うのか」
「CSSではどう指定すればいいのか」
「JavaScriptではdivをどのように利用するのか」
と疑問に感じる方も多いのではないでしょうか。
div は、それ自体が見た目を変えるためのタグではありません。情報をグループ化した範囲に名前を付けることで、CSS でデザインを適用したり、JavaScript で特定の部分を操作したりできるようになります。
この記事では、divタグへの class・id の書き方から、CSS での指定方法、JavaScript で利用する基本的な考え方まで、初心者にも分かりやすく解説します。
なお、div の役割や「どこまで囲むべきか」といったグループ化の考え方については、前回の記事で詳しく解説しています。
divタグの基本的な書き方
divタグの基本構文
div タグは、開始タグと終了タグの間にまとめたい内容を入れて使用します。
<div>
内容
</div>このように記述すると、div で囲まれた部分が1つのグループとして扱われます。
ただし、この時点では見た目が変わったり、特別な意味が付いたりするわけではありません。
div 自体には「これは商品情報です」「これはメニューです」といった固有の意味はなく、HTML 内で関連する要素をまとめるための役割を持っています。
CSS でデザインを変更したり、JavaScript で操作したりする場合は、この後説明する class や id を指定して利用します。
divにclassを書いてCSSを適用する
div は、HTML の中で情報をグループ化するための要素です。
しかし、div だけでは、CSS で特定の範囲にデザインを適用したり、JavaScript で操作したりするときに、どの部分を対象にするのか指定しにくくなります。
そこで利用するのが class属性です。
div に class を指定すると、その名前を目印として CSS や JavaScript から対象の要素を指定できるようになります。
つまり、class は HTML と CSS・JavaScript をつなぐ目印の役割を持っています。
classの書き方の基本ルール
class は、HTML要素に追加する情報を指定する属性です。
div に class を書く場合は、開始タグの中に以下のように記述します。
<class="product">
商品情報
</div>この記述は、以下の3つの部分で構成されています。
| 記述 | 意味 |
|---|---|
| div | 要素名（タグ名） |
| class | 属性名 |
| product | 属性値（class属性に指定した値） |
つまり、
class="product"とは、
「この div要素に、product という値を持つ class属性を指定する」
という意味です。
classを書くときの注意点
class を記述するときは、スペースや記号の種類に注意する必要があります。
正しい書き方：
<div class="product">この場合、
・divとclassの間には半角スペースを入れる
・イコール（=）は半角で記述する
・属性値は半角のダブルクォーテーション（” “）で囲む
というルールになっています。
例えば、以下のような書き方は正しく認識されません。
<div class＝”product”>この例では、
・divとclassの間が全角スペース
・イコール（=）が全角
・ダブルクォーテーション（” “）が全角
になっています。
HTML では、見た目が似ている文字でも別の文字として扱われます。
そのため、HTML のコードを書く場合は、スペースや記号は半角で入力します。
class名（属性値）の付け方
class に指定する値は自由に決めることができます。
例えば、
<div class="box">としてもHTMLとしては問題ありません。
ただし、class名は後からコードを確認したときに、その役割が分かる名前を付けることが一般的です。
例えば、
<div class="product">であれば商品情報のまとまり、
<div class="menu">であればメニュー部分、
<div class="card">であればカード型の表示部分、
というように、その範囲の役割が分かる名前を付けます。
また、class属性には1つだけでなく複数の class名（属性値）を指定することもできます。
複数指定する場合は、値と値の間を半角スペースで区切ります。
<div class="product card">この例では、
・product
・card
という2つの class名が指定されています。
なお、複数の class を指定する方法については、この後で詳しく解説します。
class名でよく使われるルール
class名には決まった名前を付ける必要はありませんが、一般的には以下のようなルールで作成します。
・半角英数字を使用する
・英字から始めることが多い
・単語の区切りには-（ハイフン）や_（アンダースコア）を使用する
・日本語のclass名は通常使用しない
例：
<div class="product-card"><div class="user_info">などです。
複数のclassを指定する方法
class属性には、1つだけでなく複数の class名を指定できます。
複数指定する場合は、各 class名を半角スペースで区切って記述します。
例えば、次のコードでは、product と card という2つの class が指定されています。
<div class="product card">
商品情報
</div>一方、カンマ（,）で区切ることはできません。
例えば、
<div class="product,card">
商品情報
</div>と記述すると、product と card という2つの class ではなく、product,card という1つの class名として扱われます。
また、class名を区切る際は、半角スペースを使用します。
全角スペースでは正しく認識されない場合があるため、HTMLでは半角スペースで記述します。
複数の class を指定すると、それぞれの class に対応した CSS を1つの要素へまとめて適用できます。
例えば、
<div class="product card">であれば、.product で指定したCSSと .card で指定した CSS の両方が、この div要素に適用されます。
そのため、共通のデザインと個別のデザインを組み合わせたい場合などによく利用されます。
classを使ってCSSを書く方法
HTML側で class を指定したら、CSS側でその class名を指定することで、特定の div にスタイルを適用できます。
HTML：
<div class="product">
商品情報
</div>CSS：
.product {
background-color: #eee;
padding: 20px;
}CSSでは、class名の前に半角の「.（ドット）」を付けます。
この、
.productという書き方は、
「product という class属性が指定された HTML要素を選択する」
という意味になります。
HTML側の、
class="product"と、
CSS側の、
.productは、同じ product という名前によって関連付けられています。
classを使うメリット
class の最大のメリットは、同じ種類の要素に共通のデザインをまとめて適用できることです。
例えば、商品一覧ページでは、複数の商品を同じレイアウトで表示することがよくあります。
HTML：
<div class="product">
<p>商品A</p>
<p>価格：980円</p>
</div><div class="product">
<p>商品B</p>
<p>価格：1,500円</p>
</div><div class="product">
<p>商品C</p>
<p>価格：2,980円</p>
</div>CSS：
.product {
border: 1px solid #ccc;
padding: 16px;
margin-bottom: 16px;
background-color: #ffff00;
}ブラウザでの表示
商品A価格：980円
商品B価格：1,500円
商品C価格：2,980円
この場合、3つの div には同じ product という class が指定されているため、.product で指定した CSS がすべての商品情報に適用されます。
もし商品が100件あっても、それぞれに class=”product” を指定しておけば、CSS は.product を1回記述するだけで済みます。
また、商品のデザインを変更したい場合も、.product の CSS を修正するだけで、すべての商品情報に同じ変更が反映されます。
このように class を利用すると、同じ種類の要素をまとめて管理できるため、効率よくデザインを適用・変更できるというメリットがあります。
divにidを書いて利用する方法
id とは、HTML 内にある特定の要素を識別するために付ける名前です。
id は identifier（識別子） の略で、HTML の中から特定の要素を指定できるようにするための目印として利用します。
例えば、Webページ内にあるメニュー部分やお問い合わせフォームなど、「この場所を指定したい」という要素に名前を付けることで、その要素を簡単に取得したり、移動先として指定したりできます。
<div id="menu">
メニュー内容
</div>この例では、div要素に menu という id を設定しています。
このように id を設定すると、この要素を目印にして以下のような操作ができます。
・JavaScriptで特定の要素を取得する
・ページ内リンクの移動先として指定する
・CSSで特定の要素だけにスタイルを適用する
idのdivへの書き方
div に id を指定する場合は、開始タグの中に記述します。
<div id="menu">
メニュー内容
</div>記述の意味は以下の通りです。
| 記述 | 意味 |
|---|---|
| div | 要素名（タグ名） |
| id | 属性名 |
| menu | id属性に設定した名前 |
つまり、
id="menu"は、
「このdiv要素をmenuという名前で識別する」
という意味になります。
idは同じHTML文書内で重複させない
id は、HTML文書内で要素を一意に識別するための名前です。
そのため、同じHTMLページ内で同じ id値を複数の要素に指定することはできません。
例えば、以下のような記述は正しくありません。
<div id="menu">
メニュー内容
</div>
<div id="menu">
別の内容
</div>この場合、menu という同じ id が2つ存在するため、HTML文書内で要素を一意に識別できなくなります。
id を指定する場合は、ページ内でそれぞれ次のように異なる id名（menu と contact）を設定します。
例：
<div id="menu">
メニュー内容
</div>
<div id="contact">
お問い合わせ
</div>idの主な利用例
id は、特定の要素を指定したい場面で利用されます。
JavaScriptで特定の要素を取得する
JavaScriptでは、id を指定することで特定のHTML要素を取得できます。
例：
document.getElementById("menu")この場合、menu という id を持つ要素を取得します。
ページ内リンクの移動先にする
id は、同じページ内の特定の場所へ移動するリンクにも利用できます。
例：
<a href="#access">
アクセス情報を見る
</a>
<div id="access">
アクセス情報
</div>a 要素の href属性に #access を指定すると、クリックしたときに id=”access” が設定された要素の位置へ移動します。
CSSにidを書く方法
id を指定した要素には、CSS からスタイルを適用できます。
HTML：
<div id="menu">
メニュー内容
</div>CSS：
CSSでは、id名の前に#（シャープ）を付けて指定します。
#menu {
background-color:#333;
}#menu は、
「menu という id が指定されたHTML要素を選択する」
という意味になります。
なお、同じデザインを複数の場所に適用する場合は、id ではなく class を利用することが一般的です。
例えば、複数の商品情報を同じデザインで表示する場合は、下記のようにclassを使用します。
<div class="product">
商品A
</div>
<div class="product">
商品B
</div>classは複数の要素に同じ名前を指定できるため、同じ種類の要素をまとめて管理する用途に向いています。
一方、id は特定の要素を識別するための名前として利用します。
そのため、
・特定の要素を指定する → id
・複数の同じ種類の要素をまとめて扱う → class
という使い分けになります。
classとidの違い
ここまで、class と id の基本的な書き方や使い方を解説してきました。
どちらもHTML要素に名前を付ける属性ですが、役割や使い方には違いがあります。
「どちらを使えばよいのか分からない」という場合は、まずはそれぞれの用途の違いを理解しておいてください。
classとidの比較
| 比較項目 | class | id |
|---|---|---|
| 主な用途 | 同じ種類の要素をまとめる | 特定の1つの要素を識別する |
| 使用回数 | 同じ名前を複数の要素に指定できる | 同じHTML文書内では同じ名前を重複して指定できない |
| CSSから指定 | 可能（頭にドット . をつける） | 可能（頭にハッシュ # をつける） |
| JavaScriptから利用 | 可能 | 可能（非常に得意） |
大きな違いは、同じ名前を複数の要素で共有できるかどうかです。
商品一覧やカードレイアウトのように、同じデザインを何度も利用する場合は class を使用します。
一方、ページ内のメニューやお問い合わせフォームなど、特定の1つの要素を識別したい場合は id を使用します。
classを使うケース
class は、同じ種類の要素をまとめて管理したい場合に利用します。
例えば、商品一覧ページでは、複数の商品情報に同じデザインを適用することがよくあります。
<div class="product">商品A</div>
<div class="product">商品B</div>
<div class="product">商品C</div>このように、すべての商品に同じ product という class を指定することで、CSS を1回記述するだけで、すべての商品に同じデザインを適用できます。
同じ種類の要素が複数ある場合は、class を利用するのが基本です。
idを使うケース
id は、ページ内の特定の1つの要素を識別したい場合に利用します。
例えば、サイトのヘッダー部分にidを指定すると、その要素だけを JavaScript で取得したり、CSSで指定したりできます。
<div id="header">
サイトタイトル
<div class="product">/div>また、ページ内リンクの移動先として利用する場合も、idを指定します。
このように、特定の要素を指定したい場合はid、同じ種類の要素をまとめて扱いたい場合はclassというように使い分けると分かりやすいでしょう。
JavaScriptでもdivは利用される
div は CSS でデザインを整えるためだけではなく、JavaScript でページに動きを付ける場合にも利用されます。
JavaScript では、HTML要素に設定したidを目印にして、特定の要素を操作できます。
例えば、div に id を設定し、その要素を JavaScript と関連付けることで、ボタンをクリックしたときに表示内容を変更するといった動きを作ることができます。
↑↑↑↑↑↑
クリックすると文字の変更が確認できます。
HTML：
<div id="message">
こんにちは
</div>
<button class="sample-button" onclick="changeMessage()">
変更
</button>JavaScript：
function changeMessage() {
document.getElementById("message").textContent = "変更しました";
}CSS：
この例では、id=”message” を設定した div と JavaScript を関連付けています。
ボタンをクリックすると、JavaScript が実行され、div 内の「こんにちは」という文字が「変更しました」に変わります。
このように、HTML の div に id を設定しておくことで、JavaScript から特定の場所を操作できるようになり、Webページに動きや変化を加えることができます。
なお、onclick をはじめとした JavaScript のイベント処理については、内容が広くなるため別記事で詳しく解説します。
