汎用ブロック・インライン
div, span
div はブロックレベルの汎用コンテナ、span はインラインの汎用コンテナ。 意味を持たない要素なので、レイアウトやスタイル適用のためのラッパーとして使う。 意味のあるコンテンツには section・article・p などを優先すること。
デモ：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>🤖 AIプロンプトテンプレート
以下の要件を満たす、`<div>` と `<span>` の使い分けを示すHTML・CSSサンプルを作成してください。 - `<div>`（ブロックレベル）と `<span>`（インラインレベル）の違いを視覚的に示すこと - セマンティックなHTMLで代替できる場合は `<div>` を使わない例を示すこと - `<span>` を使ったテキスト内の一部分へのスタイリング例を含めること - ネスト構造のレイアウト実装例（Flexbox / Grid との組み合わせ）を示すこと - `<div>` の乱用（Divitis）を避けるためのベストプラクティスも含めること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。