汎用ブロック・インライン
div, span
div はブロックレベルの汎用コンテナ、span はインラインの汎用コンテナ。 意味を持たない要素なので、レイアウトやスタイル適用のためのラッパーとして使う。 意味のあるコンテンツには section・article・p などを優先すること。
このページでは、div・span要素のブロック／インラインの違い、コンテナ・ラッパーとしての使い方をデモとコードで確認できます。
デモ：div と span の表示の違い
div（ブロック要素 — 横幅いっぱいに広がる）
div A
div B
span（インライン要素 — テキストの流れの中に入る）
通常のテキストの中にspan Aとspan Bが混在しています。
基本的なコード例
<!-- div: ブロックレベルのコンテナ -->
<div class="card">
<div class="card-header">タイトル</div>
<div class="card-body">本文のテキスト</div>
</div>
<!-- span: インラインのコンテナ -->
<p>
価格は<span class="price">1,980円</span>（税込）です。
<span class="badge">SALE</span>
</p>div の主な用途
| 用途 | 例 |
|---|---|
| レイアウトコンテナ | <div class="container"> |
| グリッド・フレックスの親要素 | <div class="grid grid-cols-3"> |
| カードUI | <div class="card shadow"> |
| モーダル・オーバーレイ | <div class="modal-overlay"> |
span の主な用途
| 用途 | 例 |
|---|---|
| テキストの一部を装飾 | <span class="highlight">重要</span> |
| バッジ・ラベル | <span class="badge">NEW</span> |
| アイコンと文字の組み合わせ | <span aria-hidden="true">★</span> |
| JS操作のターゲット | <span id="counter">0</span> |
注意セマンティックな要素を優先する
意味のある構造には div/span より適切な要素を使う。 スクリーンリーダーや検索エンジンが構造を正しく理解できる。
避ける（意味が伝わらない）
<div class="nav">
<div class="nav-item">ホーム</div>
</div>
<div class="title">見出し</div>
<div class="btn" onclick="...">
クリック
</div>推奨（意味を持つ要素を使う）
<nav>
<a href="/">ホーム</a>
</nav>
<h2>見出し</h2>
<button type="button" onclick="...">
クリック
</button>コンテナ・ラッパーとしての div
「コンテナ」「ラッパー」は div に付けるクラス名であり、役割を示す呼び方です。 div そのものに意味はなく、「何かを包む箱」として使うときにこう呼ばれます。 AIへの指示で「コンテナの幅を制限して」と言うと、この使い方を指しています。
| 呼び名 | 役割 | よく使うクラス名の例 |
|---|---|---|
| コンテナ（Container） | コンテンツ全体の最大幅を制限し中央揃えにする外枠 | container、wrapper、inner |
| ラッパー（Wrapper） | 複数の要素をまとめてスタイルを当てる包み要素 | card-wrapper、flex-wrapper |
| インナー（Inner） | コンテナの内側でさらに余白・幅を制御する要素 | inner、content-inner |
<!-- 最大幅を制限して中央揃えにする典型的なコンテナパターン -->
<div class="container">
<!-- max-width + margin: auto で中央揃え -->
<h1>ページタイトル</h1>
<p>本文コンテンツ</p>
</div>
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
</style>AIへの指示例
- 「コンテナの最大幅を800pxにして中央揃えにして」
- 「ラッパーにpaddingを追加してコンテンツが端に張り付かないようにして」
- 「インナーコンテナを作ってその中にグリッドレイアウトを組んで」
🤖 AIプロンプトテンプレート
以下の要件を満たす、`<div>` と `<span>` の使い分けを示すHTML・CSSサンプルを作成してください。 - `<div>`（ブロックレベル）と `<span>`（インラインレベル）の違いを視覚的に示すこと - セマンティックなHTMLで代替できる場合は `<div>` を使わない例を示すこと - `<span>` を使ったテキスト内の一部分へのスタイリング例を含めること - ネスト構造のレイアウト実装例（Flexbox / Grid との組み合わせ）を示すこと - `<div>` の乱用（Divitis）を避けるためのベストプラクティスも含めること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
Zenn