div,section

概要


< div >
文章
</div >

または

< section >
文章
</section >

のように書くことで、
この区間を一つの塊のようにみなしてコードを書くことができる。
CSSを使うことでCSSを部分すべてに適用できる。

結果(コードは後述)

これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。

これがpです。

これがリストです
これがリストです
これがリストです

これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。

これがpです。

これがリストです
これがリストです
これがリストです

HTMLファイル



<section class="section01">
  これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。これがsectionです。
  <p>これがpです。</p>
  <ol>
    <li>これがリストです</li>
    <li>これがリストです</li>
    <li>これがリストです</li>
  </ol>
</section>

<hr>

<div class="div01">
	これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。これがdivです。
  <p>これがpです。</p>
  <ol>
    <li>これがリストです</li>
    <li>これがリストです</li>
    <li>これがリストです</li>
  </ol>
</div>

CSSファイル



.section01 {
  width: 600px;
  background-color: #eeeeFF;
  margin:30px 30px 30px 30px ;
  padding:30px 30px 30px 30px ;
  border-style: solid;
  border-width: thin;
}

.div01 {
  width: 600px;
  background-color: #eeeeFF;
  margin:30px 30px 30px 30px ;
  padding:30px 30px 30px 30px ;
  border-style: solid;
  border-width: thin;
}

説明


汎用コンテナと呼ばれるもので、これで囲った部分は一つの塊のような部分になる。
この部分には、div classなどでまとめてCSSを適用することができる。

間違えやすい問題


とりあえず塊に分けるときはdivを使う。

sectionの中にはh1のような見出しをつけるべきで
単に部分として分けるだけならdivを使うべき(MDNより)