どちらもCSSを適用するときに、利用するものです。
※DIVとSPANの前に＜P＞タグについて
＜P＞文章1＜/P＞
文章2
とすると、ブラウザで表示確認すると、
文章１
文章２
というように表示されます。<br>←改行が自動で入るようなイメージでよいかな。
①DIVの場合
<h1>私の趣味</h1>
<h2>ゲーム</h2>
<p>どんなゲームが好きか・・・・</p>
<h2>野球</h2>
<p>好きなチームは・・・</p>
<h2>読書</h2>
<p>おすすめ書籍・・・・</p>
こういったものをグループ分けするときに使います。
<h1>私の趣味</h1>
<div id="game">
<h2>ゲーム</h2>
<p>どんなゲームが好きか・・・・</p>
</div>
<div id="baseball">
<h2>野球</h2>
<p>好きなチームは・・・</p>
</div>
<div id="books">
<h2>読書</h2>
<p>おすすめ書籍・・・・</p>
</div>
ここで、区分けする為にidを利用しましたが、idは大きなくくりで使います。
そのファイル内で1度しか使うことができません。
なので、classを利用することもできます。
<div id="hobby">
<h1>私の趣味</h1>
<div class="game">
<h2>ゲーム</h2>
<p>どんなゲームが好きか・・・・</p>
</div>
<div class="baseball">
<h2>野球</h2>
<p>好きなチームは・・・</p>
</div>
<div class="books">
<h2>読書</h2>
<p>おすすめ書籍・・・・</p>
</div>
</div>
スタイルシートを適用すると、DIVで囲まれた部分すべてに適用されます。
<div class="game";style="color:red;">
<p>文章1</p>
<p>文章2</p>
</div>
この場合、文章1も文章2も文字色が赤に設定されました。
②SPANの場合
こんな風に使います。
<p>文章1<span style="color:blue;font-size:12pt">文章2</span></p>
この場合、文章２だけ青文字で文字サイズが１２に設定されました。
③DIVとSPAN両方の場合
<div style="color:red;">
<p>文章1</p>
<span style="color:green;">文章2</span>
<p>文章3</p>
<div>
この場合、文章1と文章3は赤文字で、文章2は緑文字になります。
