実行できるHTMLドキュメント: div タグ

Q: div class とはどういう意味ですか？

は class 属性を持つ div です。クラスは CSS がスタイルを付けるとき (.card { ... }) や JavaScript が要素を探すときに使う名前です。複数の div で同じクラスを共有でき、1 つの div に複数のクラスも付けられます: class="card featured"。

Q: 2 つの div を横並びにするには？

親の div で囲み、親に display: flex を指定します。子要素が横 1 列に並びます。間隔は gap で空け、子に flex: 1 を付けると幅が均等に分かれます。

Q: div と section はどちらを使うべきですか？

内容にその役割があるなら 、 、 、 、 、 を使います。スクリーンリーダーや検索エンジンが理解できるからです。スタイルやレイアウトのための箱が必要なだけなら を使います。

Q: p タグの中に div を入れられますか？

入れられません。段落にはインラインの内容しか入りません。ブラウザは を見た時点で を閉じるので、スタイルが崩れます。外側の要素に div を使うか、段落の中では を使いましょう。

div タグの役割

<div> (division の略) は汎用のコンテナです。要素をまとめて、1 つの単位としてスタイルを付けたり、配置したり、スクリプトで操作したりできます。それ自体には見た目がなく、余白も枠線も特別なフォントもありません。ブロック要素なので、新しい行から始まり、利用できる幅いっぱいに広がります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    div { border: 2px dashed #2563eb; padding: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div>
    <h2>A group</h2>
    <p>The dashed border shows the div around the heading and this paragraph.</p>
  </div>
  <div>A second div starts on a new line.</div>
</body>
</html>

style の border の行を消すと div は見えなくなります。これが div の初期状態の見た目です。見た目はすべて CSS で決まります。

div の class と id

div には普通 class を付け、CSS はその名前を対象にします。同じクラスの div には同じスタイルが適用されます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div class</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; background: #f3f4f6; }
    .card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
    .card h3 { margin: 0 0 4px; }
    .card.highlight { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
  </style>
</head>
<body>
  <div class="card">
    <h3>Basic</h3>
    <p>class="card"</p>
  </div>
  <div class="card highlight" id="pro">
    <h3>Pro</h3>
    <p>class="card highlight" and id="pro"</p>
  </div>
</body>
</html>

.card は両方の箱にスタイルを付け、.card.highlight は両方のクラスを持つ div に青い輪郭を追加します。特定の 1 つの div を指したいとき、たとえばリンク先 (href="#pro") にするときは id を使います。class と id の違いは属性のページで詳しく比べています。

div を横並びにする

div はブロックなので縦に積み重なります。横 1 列に並べるには、親を flex コンテナにします。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divs side by side</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .row { display: flex; gap: 12px; }
    .col { flex: 1; padding: 12px; border-radius: 8px; background: #e5e7eb; }
    .col.wide { flex: 2; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col">One</div>
    <div class="col wide">Two (twice as wide)</div>
    <div class="col">Three</div>
  </div>
</body>
</html>

.row の display: flex が子を横に並べ、gap が間隔を空け、flex の値が幅を分け合います (ここでは 1 : 2 : 1)。この親と子の組み合わせは、実際のサイトで最もよく見る div の使い方です。div を中央に配置する方法は div を中央寄せする方法を参照してください。

div の入れ子

div の中には好きな深さまで div を入れられます。各階層は箱の中の箱で、すべての div に枠線と内側の余白を付けるとよくわかります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested divs</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #2563eb; padding: 10px; }
    .page { background: #eff6ff; }
    .sidebar { background: #fef3c7; border-color: #f59e0b; }
    .content { background: white; margin-top: 8px; }
  </style>
</head>
<body>
  <div class="page">
    .page
    <div class="sidebar">.sidebar</div>
    <div class="content">
      .content
      <div>an inner div</div>
    </div>
  </div>
</body>
</html>

入れ子はレイアウトが許す範囲でできるだけ浅くしましょう。ラッパーが 1 つ増えるたびに、margin や width が思いどおりにならないときに考えるべき箱が 1 つ増えます。

div か、意味を持つタグか

div は内容について何も伝えません。HTML には、同じようにまとめる役割を持ちつつ、そのまとまりが何なのかも伝えるタグがあります。

代わりに	使うタグ	用途
`<div class="header">`	`<header>`	ページやセクションの導入部、上部のバー
`<div class="nav">`	`<nav>`	ナビゲーションリンクのまとまり
`<div class="main">`	`<main>`	メインのコンテンツ (1 ページに 1 つ)
`<div class="post">`	`<article>`	独立した項目: 投稿、コメント、商品カード
`<div class="footer">`	`<footer>`	ページやセクションのフッター

これらのタグはスタイルを付けるまで div とまったく同じ見た目ですが、スクリーンリーダーが読み上げてユーザーがその間を移動できるようにし、検索エンジンは構造を読み取ります。上の .row のように、レイアウトやスタイルのためだけにある箱には div を使いましょう。一覧はセマンティック HTML のページで解説しています。

div はボタンではない

クリックのハンドラを付けた div はマウスを使う人にはクリックできるように見えますが、キーボードを使う人は Tab で移動することも Enter で押すこともできず、スクリーンリーダーもボタンとして読み上げません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs button</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .fake, button { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 0; background: #2563eb; color: white; font: inherit; cursor: pointer; margin: 4px; }
  </style>
</head>
<body>
  <div class="fake" onclick="document.getElementById('out').textContent = 'div clicked'">div</div>
  <button onclick="document.getElementById('out').textContent = 'button clicked'">button</button>
  <p id="out">Click the preview, then press Tab: only the button gets focus.</p>
</body>
</html>

操作には <button> を、ページの移動には <a href> を使いましょう。どちらも最初からフォーカスでき、キーボードで操作できます。

よくある間違い

<p> の中に div を入れる。 div の前で段落が閉じてしまいます。div を外側の要素にするか、段落の中では <span> を使いましょう。
div だらけ。 div だけで作ったページには、スクリーンリーダーにとっての構造がありません。当てはまる箇所は <header>、<nav>、<main>、<footer> に置き換えましょう。
クリックできる div。 代わりに <button> やリンクを使いましょう。
div の幅がテキストと同じになると思い込む。 div は横幅いっぱいに広がります。縮めたいなら display: inline-block、width: fit-content、または <span> を使います。
複数の div で id を使い回す。 繰り返すものにはクラスを使いましょう。

よくある質問

HTML の div とは何ですか？

<div> は汎用のコンテナです。他の要素をまとめて、一緒にスタイルを付けたり配置したりできます。それ自体に意味はなく、ブラウザは新しい行から始まり利用できる幅いっぱいに広がるブロックとして表示します。

div class とはどういう意味ですか？

<div class="card"> は class 属性を持つ div です。クラスは CSS がスタイルを付けるとき (.card { ... }) や JavaScript が要素を探すときに使う名前です。複数の div で同じクラスを共有でき、1 つの div に複数のクラスも付けられます: class="card featured"。

2 つの div を横並びにするには？

親の div で囲み、親に display: flex を指定します。子要素が横 1 列に並びます。間隔は gap で空け、子に flex: 1 を付けると幅が均等に分かれます。

div と section はどちらを使うべきですか？

内容にその役割があるなら <section>、<header>、<nav>、<main>、<article>、<footer> を使います。スクリーンリーダーや検索エンジンが理解できるからです。スタイルやレイアウトのための箱が必要なだけなら <div> を使います。

p タグの中に div を入れられますか？

入れられません。段落にはインラインの内容しか入りません。ブラウザは <div> を見た時点で <p> を閉じるので、スタイルが崩れます。外側の要素に div を使うか、段落の中では <span> を使いましょう。