CSS タグ(divとspan) id classの使い分け

今回は、タグ(divとspan)と属性(idとclass)について解説します。

同時に解説する理由は、セットで使うことがほとんどだからです。

まず、divとspanからいきましょう！

divとspan

どちらもHTMLのタグになります。

<div>～</div> <span>～</span> のような書き方になります。

タグで囲まれた中にあるモノ（例えばPタグだったり、h1タグだったり）のデザインを変えたいときになります。デザインを変えたいとは、CSSを指定したいという意味になります。

区切りを作り、デザインを行いやすくするイメージでしょうか。

下記のイメージです。

<div class="1">
<p>はじめまして</p>
<p>私の名前はupandupです</p>
</div>

<div class="2">
<p>さようなら</p>
<p>また逢う日まで</p>
</div>

上記で最初の<div class=1>～ </div>までがブロックとなり、CSSでスタイリングできます。

<div class=”2″>～</div>も同様です。

実際のcssでのスタイリングは以下の感じです。

1と2を指定してスタイリングできます。

.1 {
 width:400px;
 height:400px;
 background:blue;
}

.2 {
 width:800px;
 height:800px;
 background:blue;
}

div と spanの違い

divはwidthとheightの指定ができますが、spanはできません。

spanは改行が入らないため、文字の一部分を装飾する際に使用します。