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は display :block となっている
spanは  dispaly : inline となっている

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

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

upandup

Web制作の記事を中心に、暮らし、ビジネスに役立つ情報を発信します。 アフィリエイトにも参加しています。よろしくお願いいたします。