インライン要素

HTML (Hypertext Markup Language) の要素は従来、「ブロックレベル」要素と「インライン」要素に分類されていました。インライン要素は、コンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有するものです。この記事では、 HTML のインライン要素と、 ブロックレベル要素との違いについて説明します。

メモ: インライン要素は新しい行から始まらず、必要な幅のみを占有します。

デモによるインライン要素とブロックレベル要素の比較

これは最も簡単なデモとシンプルな例です。最初に、使用するシンプルな CSS は以下のものです。

.highlight {
  background-color:#ee3;
}

インライン要素

インライン要素を紹介する以下の例を見てください。

<div>The following span is an <span class="highlight">inline element</span>;
its background has been colored to display both the beginning and end of
the inline element's influence.</div>

この例では、ブロックレベル要素の <div> がいくらかのテキストを含んでいます。そのテキストの中に、インライン要素である <span> 要素があります。 <span> 要素はインラインなので、段落は単独で、テキストの流れを分断せずに、以下のように表示されます。

ブロックレベル要素

それでは <span> を <p> のようなブロックレベル要素に変更してみましょう。

<div>The following paragraph is a <p class="highlight">block-level element;</p>
its background has been colored to display both the beginning and end of
the block-level element's influence.</div>

前回と同じ CSS を使って表示していますが、結果は以下のようになります。

違いが分かりましたか。 <p> 要素は文字列を <p> の前の文字列、 <p> の文字列、そして <p> の後の文字列と 3 つの部分に分割して、レイアウトを全体的に変更しました。

要素レベルの変更

CSS の display プロパティを使用すると、要素の視覚表現を変更することができます。例えば、 display の値を "inline" から "block" に変更することで、インライン要素をインラインボックスではなくブロックボックスで描画するようブラウザーに指示することができます。しかし、これによって要素のカテゴリやコンテンツモデルが変更される訳ではありません。例えば、 span 要素の display を "block" に変更しても、その中に div 要素を含めることができるようになる訳ではありません。

概念上の違い

簡単に言えば、インライン要素とブロックレベル要素の基本概念の違いは以下の通りです。

コンテンツモデル

一般に、インライン要素はデータや他のインライン要素のみを含みます。ブロック要素をインライン要素の中に置くことはできません。

整形

既定では、インライン要素は文書の流れの中で強制的に新しい行から始まりません。一方、ブロックレベル要素は一般的に改行が行われます (ただし、これは CSS を使って変更することができます)。

「インライン」要素の一覧

以下の要素は既定でインラインです (ただし、ブロック要素とインライン要素は HTML5 では定義されなくなり、代わりにコンテンツカテゴリが使用されます)。

関連情報