1. ウェブ
  2. CSS
  3. リファレンス
  4. 値
  5. <display-outside>

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

<display-outside>

Baseline
広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

<display-outside> のキーワードは、本質的にフローレイアウトにおける要素の役割である、要素の display の外部表示種別を指定します。これらのキーワードは display プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では <display-inside> のキーワードと共に使用されます。

構文

有効な <display-outside> の値は以下の通りです。

block

要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。

inline

要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。

メモ: 2 つの値の構文に対応しているブラウザーは、外部 display 値（display: block や display: inline など）のみが指定されていると、内部表示種別を flow に設定します（display: block flow や display: inline flow など）。 これは単一のキーワード構文との下位互換性があります。

形式文法

<display-outside> = 
  block   |
  inline  |
  run-in
この構文は CSS Display Module Level 4 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

以下の例では、 span 要素 (通常はインライン要素として表示) に display: block が設定されているので、改行が行われ、コンテナーのインライン方向を埋めるように拡張されます。

HTML

html
<span>span 1</span> <span>span 2</span>

CSS

css
span {
  display: block;
  border: 1px solid rebeccapurple;
}

結果

仕様書

仕様書
CSS Display Module Level 3
# typedef-display-outside

ブラウザーの互換性

css.properties.display.block

css.properties.display.inline

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告