CSSの要素グループ化 divとspanの使い方を完全ガイド！初心者でもわかる基本

新人と先輩の会話形式で理解しよう

新人

「CSSで、divやspanってよく見かけるけど、具体的に何をするためのものなんですか？」

先輩

「それは良い質問ですね。divやspanは、HTMLの要素をグループ化するためのタグです。これらを使うことで、CSSでのスタイル設定やレイアウトの管理が簡単になります。」

新人

「なるほど！でも、どう使い分ければいいんですか？」

先輩

「では、具体的に使い方を見ていきましょう！」

1. divタグとspanタグとは？

divタグとspanタグは、どちらもHTMLで要素をグループ化するためのタグです。しかし、役割に違いがあります。

divタグは、block要素を作成するために使います。これにより、要素を縦に並べることができます。

spanタグは、inline要素を作成するために使います。つまり、要素が同じ行に並ぶようになります。

2. divタグの使い方

divタグは、一般的に大きなブロックのグループ化に使用されます。例えば、複数のセクションをまとめて、スタイルやレイアウトを適用する場合に便利です。

例えば、次のコードはdivタグを使ってページの主要部分をグループ化する例です。


<div class="container">
    <div class="header">
        <h1>ページのタイトル</h1>
    </div>
    <div class="content">
        <p>ここにメインのコンテンツが入ります。</p>
    </div>
    <div class="footer">
        <p>フッター情報</p>
    </div>
</div>

ブラウザ表示

3. spanタグの使い方

spanタグは、行内の要素をスタイル変更したり、特定の部分を強調したりするために使います。divタグのように行を分けることはありません。

例えば、次のコードはspanタグを使ってテキストの一部にスタイルを適用する例です。


<p>これは<em><span style="color: red;">重要な部分</span></em>です。</p>

ブラウザ表示

4. divとspanを組み合わせる

divタグとspanタグは、それぞれ異なる目的で使用されますが、一緒に使うことでより柔軟なレイアウトやスタイリングが可能になります。

例えば、次のようにdivタグで全体をグループ化し、その中でspanタグを使ってテキストのスタイルを変更することができます。


<div class="container">
    <div class="header">
        <h1>ページのタイトル</h1>
    </div>
    <div class="content">
        <p>ここにメインのコンテンツが入ります。特に<span style="color: green;">重要な部分</span>があります。</p>
    </div>
    <div class="footer">
        <p>フッター情報</p>
    </div>
</div>

ブラウザ表示