CSS において、置換要素は CSS のスコープの外で表現される要素です。 CSS の整形モデルとは独立して表現される外部オブジェクトです。

もっと簡単な言葉で言い換えれば、コンテンツが現在の文書のスタイルに影響されない要素です。置換要素の位置は CSS を使用して変更することができますが、置換要素自身のコンテンツは違います。 <iframe> のような一部の置換様子では、独自のスタイルシートを持つことができますが、親文書のスタイルは継承されません。

CSS が置換要素において影響できることは、要素のボックス内におけるコンテンツの位置の制御をに対応するプロパティがあることだけです。詳しい情報はコンテンツボックス内のオブジェクト位置の制御をご覧ください。

置換要素

一般的な置換要素は以下の通りです。

一部の要素は、特定の場合に限って置換要素として扱われます。

一部のフォームコントロールも置換要素になりえます。 HTML 仕様書では <input> 要素は置換要素になることがあり、 "image" 型の <input> 要素は常に置換要素です。

CSS の content プロパティを使用して挿入されるオブジェクトは無名置換要素です。 HTML のマークアップには存在しないので、「無名」です。

置換要素における CSS の使用

CSS はマージンの計算時や一部の auto 値の時など場合によって、特別に置換要素を扱います。

なお、一部の置換要素は、すべてではありませんが、 vertical-align のように一部の CSS プロパティで使用される固有の寸法やベースラインの定義を持っていることがあります。置換要素のみが固有の寸法を持つことがあります。

コンテンツボックス内のオブジェクト位置の制御

置換要素内に含まれたオブジェクトが要素のボックスエリア内で、どのように配置されるかを指定するために、特定の CSS プロパティを使用することができます。これらは CSS Images Module Level 3 及び CSS Images Module Level 4 仕様書で定義されています。

object-fit
置換要素の中身のオブジェクトがどのように要素の内包ボックスに合わせられるかを指定します。
object-position
要素のボックス内で置換要素の中身のオブジェクトが配置される位置を指定します。

関連情報

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

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