happy cat image

tomodevel

皆んなのウェブ入門, ともでぃべる

divタグと spanタグ

divタグと spanタグについて調べましょう。

divタグ

divタグと spanタグはWebページ空間を作る時に使います。
まず、divタグと spanタグは何が違うかそれから見てみましょう。

divタグの使い方

<div></div>

spanタグの使い方

<span></span>

まず、divタグからです。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>0</div>
</body>
</html>

上のソースの結果をみる数字が同じラインで位置してないんです。
次はspanタグです。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>0</span>
</body>
</html>

上のソースの結果をみる数字が同じラインで位置してます。
これがdivタグとspanタグの違いです。
divタグは一つのラインを全部使う性質があり、spanタグは自分の内容のだけのサイズを持ちます。
空間を作るのはCSS3が必要なんで、CSS3を学習する時に調べましょう。headerタグとfooterタグも同じです。

講座に戻り