crossline

▼CSS -section-

font-size:12px;line-height: 150%;

 

 

 

■section■

 

<body>
  <header>
    <h1>私のブログ</h1>
  </header>
  <article>
    <h1>私のブログの投稿</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <aside>
      <!-- この aside は article の中なのでこの aside のコンテンツは、その article そのものに直接的に関係したものだと解釈するはずだ。 -->
      <h1>解説</h1>
      <dd>
        <dt>Lorem</dt>
        <dd>ipsum dolor sit amet</dd>
      </dd>
    </aside>
  </article>
  <aside>
    <!-- この aside は記事の外に出してある。そのため、そのコンテンツがページには関係するが、上の articleに深く関係している訳ではない。 -->
    <h2>ブログロール</h2>
    <ul>
      <li><a href="#">私の友達</a></li>
      <li><a href="#">私の他の友達</a></li>
      <li><a href="#">私の親友</a></li>
    </ul>
  </aside>
</body>

 

 

 

◉aisde:補足情報

 

asideは、あまり重要でないコンテンツに使う。

ef) ブログロール、補助的な記事・ナビゲーション、ページに関連するのであれば広告にも。

 ※article要素の中で使うのであれば、解説など、その記事に関連したコンテンツ。

コンテンツのスタイルのために使わない!

 

メインのコンテンツほど重要な役割を持たないだけれど、それがページや記事に関連しているなら、ビジュアル、デザインの有無にかかわらずasideが適切。

(asideはサイドバーをコーディングするときに使用してもいい)

 

 

◉article:記事

 

articleは、ブログの記事に投稿されたコメントなど、メインコンテンツとなるような項目をマークアップするときにつかう

◉nav :ナビゲーション

 

 

 

 

 

◉section(×div)

 

sectionは、文章の構成を示すもの(本の目次を作る感覚で)

見出しとそれに関する内容と続くように、アウトラインになる範囲を定義する領域

(本来、ドキュメントはセクションの固まり/website blog 書籍)

sectionを使う間迷ったら、章や節を表す、h1~h6の見出しが付けれるかどうか考える

(見出しは必ずならず含まれる)

コンテナ要素ではないので、レイアウト目的で使わない(スタイリングのときはdiv)

 

 

CSSでレイアウトするときは、classやidを使う

 

 

広告を非表示にする