まとまりを表すdivとspanタグ

2013年3月27日：HTML

ホームページにはたいていヘッダーだとか、フッター、サイドバーがあります。

これらヘッダー、フッター、サイドバーをかたまりとして扱うことで、ページの設計を簡単にできます。

 

この構造のまとまりを示すタグにdivとspanがあります。

これらのタグは、ホームページで多用されます。

特にdivタグはホームページの骨格を指定するタグなので、非常に重要です。

 

divとspanタグはそれぞれ以下のようにして使い分けます。

  • divタグ：様々なまとまり
  • spanタグ：文字列のまとまり

 

spanの基本

spanタグの場合は、ある文字の色を変えたい場合などに使用することができます。

使い方は簡単で<span>と</span>で囲むだけです。

例えば

これは<span style="color:#ff0000">赤色</span>です。

のようにすれば、文字列「赤色」を赤にすることができます。

 

divの基本

divタグはspanタグより大きなまとまりに使用します。

例えば、段落、ヘッダー、サイドバーのようなあらゆるまとまりです。

<div>と</div>で囲んだ部分がまとまりになります。

<div align="center">
<h1>タイトル</h1>
<p>段落１</p>
</div>

とすれば、中央揃えにすることできます。

centerを、左揃えならleft、右揃えならrightとすればOKです。

 

最後に

文字列に装飾をしたい場合はspanを使い、divはサイトの骨格を構成するのに使います。

どちらも頻繁に使用する要素なので、覚えておくといいでしょう。

著者：安井 真人(やすい　まさと)

TOP