divとspan ― 汎用の箱

導入

<div> と <span> は「特に意味を持たない、ただの入れ物」です。CSS で装飾したり、要素をまとめたりするときの土台になります。

説明

• <div> … 前後で改行される ブロック要素（かたまりを囲む）
• <span> … 行の流れを崩さない インライン要素（一部だけ囲む）

<div>
  <p>この段落は箱の中にあります。</p>
</div>

<p>文中の<span>この部分</span>だけ span で囲みました。</p>

<div> は縦にかたまりを積むとき、<span> は文中の一部だけを扱うときに使い分けます。

やってみよう

上の例を打ち込み、<div> が独立したかたまりになること、<span> は文の途中に自然に収まることを確かめましょう。

演習

<div> の中に <p>ようこそ</p> を1つ入れてください。