ブロック要素とインライン要素

[新着] Webテンプレートを仮オープンしました



ブロック要素とインライン要素について

要素の多くは「ブロック要素」と「インライン要素」に分類されます。

ブロック要素
文書の骨組みとなる要素です(例えば見出しや段落など)。このタイプの要素は横幅いっぱいの領域を持つので、要素の前後には自動的に改行が入ることになります。

インライン要素
文章中の一部として扱われる要素です(例えばリンクや文字の強調など)。このタイプの要素は行の一部として扱われるので、要素の前後には改行は入りません。

置換インライン要素(インラインブロック)
インライン要素の中には、「置換インライン」というタイプの要素が存在します。通常、インライン要素は横幅と高さを持ちませんが、この置換インライン要素は横幅(width)と高さ(height)を持ちます。例えばimg要素やテキストエリアなどがこのタイプに当てはまります。

ブロック要素とインライン要素の表示例

次の例は、ブロック要素とインライン要素、それぞれの周囲に枠線を付けて表示したものです。

ブロック要素の前後には
【ブロック要素】
改行が入ります。

インライン要素の前後には【インライン要素】改行は入りません。

このように、ブロック要素(赤い枠線部分)はその領域が幅いっぱいに広がり、インライン要素(青い枠線部分)は文章中の一部として扱われることになります。

ルール

次のようなルールがあります。

  • ブロック要素の中には、別のブロック要素やインライン要素を入れることができます。
  • インライン要素の中には、別のインライン要素を入れることができます。
  • インライン要素の中には、ブロック要素を入れることはできません。

例外的に次のようなルールもあります。

  • 一部のブロック要素(h1〜h6paddress)では、その中に別のブロック要素を入れることはできません。(インライン要素は入れられます)
記述例
<div><h1>見出し</h1></div>
× <h1><div>見出し</div></h1>
<p><a href="index.html">リンク</a></p>
× <a href="index.html"><p>リンク</p></a>

ブロック要素の一覧

HTMLタグリストに掲載されている要素のみを表示しています。

ブロック要素
address blockquote center div dl
fieldset form h1〜h6 hr noframes
noscript ol p pre table
ul

インライン要素の一覧

HTMLタグリストに掲載されている要素のみを表示しています。

インライン要素
a b basefont big blink
br cite code em font
i label map nobr q
ruby s samp small span
strike strong sub sup tt
u var

置換インライン要素の一覧

HTMLタグリストに掲載されている要素のみを表示しています。

置換インライン要素
applet button embed iframe img
input object select textarea

特殊な要素

次の要素は、状況によりブロック要素になる場合とインライン要素になる場合があります。

ブロック要素・インライン要素
del ins


[特集] レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版