<header>要素

html5の要素の使い方と、「sanitize.css」のリセットについて検証しています。

※このページはデモというよりただのソースサンプルです。

<header>の中に色々文章とかあっても良い。

<header>は何回出てきてもよい。(親要素に対するheaderという扱いになる。)

<nav>要素

ナビゲーションは<nav>でくくる。

<nav>も何回出てきてもよい。(親要素に対するnavという扱いになる。)

<main>要素

main要素は、ドキュメントの中にひとつだけ。これはmainブロックの本文です。

<article>要素1 : html5の主要な要素について

article要素は、ひとつのブログ記事のように、それだけで完結する内容のまとまり。articleの中に、<section>が入っていても良い。

articleの中に<header>や<footer>が入っていてもよい。(そのarticleのheader、footerという扱い。)

<section>要素1 : sectionとは

sectionは章や論文のような番号付きのセクションなどに利用する。

<section>要素2 : sectionとarticle

articleとの扱いが分かりにくいが、articleは「単独で再配布でき再利用できる」カタマリだそう。概念としては、articleの中にsectionが入ることはあっても、sectionのなかにarticleが入ることはなさそう...?

<article>要素2 : リセットCSS「sanitize.css」の検証

有用なデフォルトのスタイルは維持しつつ、各ブラウザの差異をなくすタイプのリセットCSS。セレクタを見るにhtml5を対象としておりモダンブラウザとスマホ対象のよう。(レガシーブラウザには合わない。)

第1章:h要素や全体のこと

  • 「margin」・「padding」はすべて0にリセット。
  • 「font-size」、「line-height」は全て「inherit」にリセット。
  • h1〜h6要素の太字設定は生きている。
  • 全ての要素に「box-sizing: border-box;」がついているため、borderやpaddingの計算に注意が必要。

第2章 : リスト要素の表示

ul要素の表示

「ul」は、ちゃんとリスト表示になっているがulのパディングがリセットされている。(親要素がoverflow:hiddenだと黒丸のところが消えてしまう。)

  • ul + li要素1
  • ul + li要素2
  • ul + li要素3

ol要素の表示

「ol」も同じく、ちゃんと番号リスト表示になっているがulのパディングがリセットされている。

  1. ol + li要素1
  2. ol + li要素2
  3. ol + li要素3

「nav + ul」・「nav + ol」

「nav + ul」、「nav + ol」は、さらに「list-style: none;」なので何も出ないようになっている。

第3章:画像(img、videoなど)

画像の位置は「vertical-align: middle」。垂直中央に揃えられる。(audioやvideoも同様。)sample

第4章:sup、sub

<sup>要素[上付き文字]<sub>要素[下付き文字]は、文字サイズは等倍だが位置は生きている。