読者です 読者をやめる 読者になる 読者になる

底辺過ぎてちょっとビビる

26歳からIT業界にいるエンジニアが、まったく成長できてないことを確認するブログ。備忘録的に使いたいとも考えています。

【HTML】DIVタグとSPANタグの使い分けについて【基礎】

 

どちらもCSSを適用するときに、利用するものです。

 

 

※DIVとSPANの前に<P>タグについて

<P>文章1</P>

          文章2

とすると、ブラウザで表示確認すると、

 

文章1

 

文章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>

この場合、文章2だけ青文字で文字サイズが12に設定されました。



③DIVとSPAN両方の場合

<div style="color:red;">
    <p>文章1</p>
    <span style="color:green;">文章2</span>
    <p>文章3</p>
<div>


この場合、文章1と文章3は赤文字で、文章2は緑文字になります。