[新着] Webテンプレートを仮オープンしました
ブロック要素とインライン要素の違いや、それぞれの要素一覧です。
要素の多くは「ブロック要素」と「インライン要素」に分類されます。
■ブロック要素
文書の骨組みとなる要素です(例えば見出しや段落など)。このタイプの要素は横幅いっぱいの領域を持つので、要素の前後には自動的に改行が入ることになります。
■インライン要素
文章中の一部として扱われる要素です(例えばリンクや文字の強調など)。このタイプの要素は行の一部として扱われるので、要素の前後には改行は入りません。
■置換インライン要素(インラインブロック)
インライン要素の中には、「置換インライン」というタイプの要素が存在します。通常、インライン要素は横幅と高さを持ちませんが、この置換インライン要素は横幅(width)と高さ(height)を持ちます。例えばimg要素やテキストエリアなどがこのタイプに当てはまります。
次の例は、ブロック要素とインライン要素、それぞれの周囲に枠線を付けて表示したものです。
インライン要素の前後には【インライン要素】改行は入りません。
このように、ブロック要素(赤い枠線部分)はその領域が幅いっぱいに広がり、インライン要素(青い枠線部分)は文章中の一部として扱われることになります。
次のようなルールがあります。
例外的に次のようなルールもあります。
| ○ | <div><h1>見出し</h1></div> |
|---|---|
| × | <h1><div>見出し</div></h1> |
| ○ | <p><a href="index.html">リンク</a></p> |
| × | <a href="index.html"><p>リンク</p></a> |