部分分けできるもの

概要


部分分けできる箱みたいなもの。
複数の要素をまとめてCSS適用できるので便利。
種類がたくさんあり、使用用途によって使い分けるのだが、
機能は全て同じなので、面倒なら全部divだけで済ませても問題が起こるわけではない。

結果(コードは後述)

これがheaderです。

リスト1
リスト2
リスト3

これがarticleです。

リスト1
リスト2
リスト3

これがsectionです。

リスト1
リスト2
リスト3

これがmainです。

リスト1
リスト2
リスト3

これがdivです。

リスト1
リスト2
リスト3

HTMLファイル


<header class="header01">
  <p>これがheaderです。</p>
  <ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ol>
</header>

<hr>

<nav class="nav01">
  <p>これがnavです。</p>
  <ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ol>
</nav>

<hr>

<article class="article01">
  <p>これがarticleです。</p>
  <ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ol>
</article>

<hr>

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

<hr>

<main class="main01">
  <p>これがmainです。</p>
  <ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ol>
</main>

<hr>

<aside class="aside01">
  <p>これがasideです。</p>
  <ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ol>
</aside>

<hr>

<footer class="footer01">
  <p>これがfooterです。</p>
  <ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ol>
</footer>

<hr>

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

CSSファイル


.header01,
.nav01,
.article01,
.section01,
.main01,
.aside01,
.footer01,
.div01{
  width: 600px;
  background-color: #eeeeFF;
  border-style: solid;
  border-width: thin;
}

部分分けできるもの

概要

結果(コードは後述)

HTMLファイル

CSSファイル

説明

間違えやすい問題