【HTML5】divタグとは？使い方についてまとめ

divの概要

単体では特に意味を持たないタグで、divで囲いブロックレベル要素としてグループ化することができます。同様に特に意味を持たないタグで、spanがありますがそちらはinline要素のため文章の一部などで使用されます。

注意点

クローラーに認識させやすくするため、nav要素やarticle要素などの意味的要素をもつタグがないときだけ使用するようにしましょう。

divに入れられるタグ一覧

タグ早見表

a abbr address article aside audio b bdo bdi blockquote br button canvas cite code data datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label main map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time ul var video wbr area(map要素の子孫の場合) link(itemprop属性がある場合) meta(itemprop属性がある場合) style(scoped属性がある場合)

入れられるタグのカテゴリー・モデル

divに使える属性

属性とは<div> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id	概要	要素に対してID固有の識別名を付けることができます。
id	属性の値	英字から始まる英数字
class	概要	要素に対して分類名を付けることができます。
class	属性の値	英字から始まる英数字
style	概要	要素に対して直接スタイルを指定することができます。
style	属性の値	スタイルシートのコード

グローバル属性一覧はこちら

スポンサードサーチ

divの使い方

<h2>縦並びに囲う方法</h2>
<div id="box01"><!--親要素-->
  <div class="box-items"><!--子要素-->
    <h3>BOX1</h3>
  </div>
  <div class="box-items"><!--子要素-->
     <h3>BOX2</h3>
  </div>
<div>

<h2>横並び均等に囲う方法</h2>
<div id="box02"><!--親要素-->
  <div class="box-items"><!--子要素-->
    <h3>BOX1</h3>
  </div>
  <div class="box-items"><!--子要素-->
    <h3>BOX2</h3>
  </div>
<div>

.box-items{
  border:1px solid; /*-囲い線を指定-*/
  width:100%; /*-幅を指定-*/
  margin:10px 0; /*-余白を指定-*/
  background:#ffb6c1; /*-背景色を指定-*/
}
/*-----横並びCSS-----*/
#box02{
  display:flex; /*-要素横並び指定-*/
}

ブラウザ対応状況

ブラウザの対応（PC)
Chrome	あり
Safari	あり
Internet Explorer	あり
Edge	あり
Firefox	あり
Opera	あり
ブラウザの対応（SP)
Chrome	あり
Safari	あり
Samsung Internet	あり

divの使い方についてまとめ

divの概要

注意点

divのカテゴリー

コンテンツカテゴリー

コンテンツモデル