HTML において、インライン要素はコンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有します。この記事では、 HTML のインライン要素と、ブロックレベル要素とどのように異なるのかを説明します。

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

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

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

.highlight {
  background-color:#ee3;
}

インライン要素

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

<p>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.</p>

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

ブロックレベル要素

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

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

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

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

要素レベルの変更

CSS の display プロパティを使用して、要素のレベルを変更することができます。 display の値を "inline" から "block" に変更することで、インライン要素をインラインボックスではなくブロックボックスで描画するようブラウザーに指示することができます。 もともとのインラインブロックであるかのように要素を正確にレンダリングするとは限りませんので、必ず結果を確認してください。

概念上の違い

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

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

インライン要素の一覧

以下の要素は既定でインラインです。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank, Marsf
最終更新者: mfuji09,