block-level element;
-its background has been colored to display both the beginning and end of -the block-level element's influence.` 要素は文字列を `
` の前の文字列、 `
` の文字列、そして `
` の後の文字列と 3 つの部分に分割して、レイアウトを全体的に変更しました。 - -### 要素レベルの変更 - -CSS の {{cssxref("display")}} プロパティを使用すると、要素の*視覚表現*を変更することができます。例えば、 `display` の値を `"inline"` から `"block"` に変更することで、インライン要素をインラインボックスではなくブロックボックスで描画するようブラウザーに指示することができます。しかし、これによって要素の*カテゴリ*や*コンテンツモデル*が変更される訳ではありません。例えば、 `span` 要素の `display` を `"block"` に変更しても、その中に `div` 要素を含めることができるようになる訳ではありません。 - -## 概念上の違い - -簡単に言えば、インライン要素とブロックレベル要素の基本概念の違いは以下の通りです。 - -- コンテンツモデル - - : 一般に、インライン要素はデータや他のインライン要素のみを含みます。ブロック要素をインライン要素の中に置くことはできません。 -- 整形 - - : 既定では、インライン要素は文書の流れの中で強制的に新しい行から始まりません。一方、ブロックレベル要素は一般的に改行が行われます (ただし、これは CSS を使って変更することができます)。 - -## 「インライン」要素の一覧 - -以下の要素は既定でインラインです (ただし、ブロック要素とインライン要素は HTML5 では定義されなくなり、代わりに[コンテンツカテゴリ](/ja/docs/Web/Guide/HTML/Content_categories)が使用されます)。 - -- {{ HTMLElement("a") }} -- {{ HTMLElement("abbr") }} -- {{ HTMLElement("acronym") }} -- {{ HTMLElement("audio") }} (視覚的なコントロールがある場合) -- {{ HTMLElement("b") }} -- {{ HTMLElement("bdi") }} -- {{ HTMLElement("bdo") }} -- {{ HTMLElement("big") }} -- {{ HTMLElement("br") }} -- {{ HTMLElement("button") }} -- {{ HTMLElement("canvas") }} -- {{ HTMLElement("cite") }} -- {{ HTMLElement("code") }} -- {{ HTMLElement("data") }} -- {{ HTMLElement("datalist") }} -- {{ HTMLElement("del") }} -- {{ HTMLElement("dfn") }} -- {{ HTMLElement("em") }} -- {{ HTMLElement("embed") }} -- {{ HTMLElement("i") }} -- {{ HTMLElement("iframe") }} -- {{ HTMLElement("img") }} -- {{ HTMLElement("input") }} -- {{ HTMLElement("ins") }} -- {{ HTMLElement("kbd") }} -- {{ HTMLElement("label") }} -- {{ HTMLElement("map") }} -- {{ HTMLElement("mark") }} -- {{ HTMLElement("meter") }} -- {{ HTMLElement("noscript") }} -- {{ HTMLElement("object") }} -- {{ HTMLElement("output") }} -- {{ HTMLElement("picture") }} -- {{ HTMLElement("progress") }} -- {{ HTMLElement("q") }} -- {{ HTMLElement("ruby") }} -- {{ HTMLElement("s") }} -- {{ HTMLElement("samp") }} -- {{ HTMLElement("script") }} -- {{ HTMLElement("select") }} -- {{ HTMLElement("slot") }} -- {{ HTMLElement("small") }} -- {{ HTMLElement("span") }} -- {{ HTMLElement("strong") }} -- {{ HTMLElement("sub") }} -- {{ HTMLElement("sup") }} -- {{ HTMLElement("svg") }} -- {{ HTMLElement("template") }} -- {{ HTMLElement("textarea") }} -- {{ HTMLElement("time") }} -- {{ HTMLElement("u") }} -- {{ HTMLElement("tt") }} -- {{ HTMLElement("var") }} -- {{ HTMLElement("video") }} -- {{ HTMLElement("wbr") }} - -## 関連情報 - -- [ブロックレベル要素](/ja/HTML/Block-level_elements) -- [HTML 要素リファレンス](/ja/docs/Web/HTML/Element) -- {{cssxref("display")}} -- [コンテンツカテゴリ](/ja/docs/Web/Guide/HTML/Content_categories) -- [通常フローでのブロック及びインラインレイアウト](/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) - -{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}}