HTML spanタグで一部を装飾する方法｜インライン要素

📌

結論

<span> はテキストの一部にスタイルを当てる目印です

文章の一部分だけ色を変えたりフォントを変えたいとき、<span> を使います。

📝 実際のコードはこちら

<p>これは<span>赤い文字</span>です。</p>

spanとdivの違い

この2つはよく比較されます。

タグ	種類	表示の違い	使いどころ
`<div>`	ブロック要素	前後に改行が入る	グループ化、レイアウト
`<span>`	インライン要素	行の中に収まる	テキストの一部への装飾

<div> は箱、<span> はマーカーペンと覚えるといいでしょう。

<span> 単体では見た目は変わりません。CSSと組み合わせて初めて効果を発揮します。

📝 実際のコードはこちら

<p>これは<span style="color: red;">赤い文字</span>です。</p>

実務ではstyle属性ではなくクラスを使いますが、仕組みは同じです。

・<span> はテキストの一部にスタイルを当てるインライン要素・<div> はブロック、<span> はインライン・CSSと組み合わせて使う

赤い文字の部分をspanで囲んでみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

赤い文字の部分だけspanで囲んでください。

詰まったらヒント

spanはインライン要素です。