はじめてのWebデザイン『HTML・CSS』入門

2-12. 囲った部分をブロックレベル要素でグループ化するタグ(div)

文章構造に影響しないタグ「div」について、使い方や使いみち、他のタグとの違いを解説します。

  • HTML・CSS
  • Webデザイン

公開日:2019/05/21最終更新日:2019/06/03

スポンサーリンク

1.レイアウトに影響しないタグ:divの使い方

<div>タグはCSSの装飾のためにタグをいれたいときや文章が読みやすくなるようにコンテンツを分けたいときに使います。
コンテンツやレイアウトなどの文章構造に影響をあたえないタグです。

サンプル:
<div class=”dialog” style="border: 1px solid red;">
  <p>ログインしますか</p>
  <ul>
    <li>はい</li>
    <li>いいえ</li>
  </ul>
</div>

以下のようにブラウザで表示されます。

divの表示

2.divタグの使い道について

divタグは文章構造に影響しないタグです。

文章構造を考えてHTMLを記述したけれど、どうしてもそのままのマークアップだけではCSSの装飾が使えないときに使います。

他にもJavaScriptの処理を実装するときなどにも使います。

3.divタグとspanタグの違い

divタグとspanタグはどちらも文章構造に影響しないタグです。
どのように使い分けるかですが、divタグは文章全体のグループ、spanタグは文章の途中のタグに囲まれた部分でコンテンツを分けることができます。

spanタグの中にはh1タグやpタグなどを入れることができません。
マークアップするときは注意しましょう。

divとspanに違い

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

スポンサーリンク

このレッスンの著者