まとまりを表す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>段落1</p> </div>
とすれば、中央揃えにすることできます。
centerを、左揃えならleft、右揃えならrightとすればOKです。
最後に
文字列に装飾をしたい場合はspanを使い、divはサイトの骨格を構成するのに使います。
どちらも頻繁に使用する要素なので、覚えておくといいでしょう。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー