CSS Display| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

Display CSS プロパティとは

トピック：要素の表示動作「レンダリングボックスの種類」を指定する事ができる 要素によって生成されるボックスのタイプを指定する

プロパティ Display

実例 コード 1

サンプル コードを試す
  • span {
  •     display: block;
  • }
  • a {
  •     display: block;
  • }

プロパティ 定義と使用法

デフォルト値・初期値 :inline
適用対象 :全要素
継承 :不可
メディア :すべて
計算値 :指定通り。ただし位置指定された要素とフロート、ルート要素を除く。これらは計算値が指定したものと違うキーワードになる可能性があります
CSS Version CSS1 ～
アニメーションの種類 :個別 アニメーション可能なプロパティ 一覧
JavaScript 構文 object.style.display="funWebref"
正規順序 :形式文法で定義される一意のあいまいでない順序
CSSの構文display: block|inline|inline-block|list-item|run-in|table|table-caption|table-cell|table-column|table-column-group|table-footer-group|table-header-group|table-row|table-row-group|none|initial|inherit

プロパティ値

値説明
inline要素をインライン要素（<span>など）として表示する 高さと幅のプロパティは効果がありません
block要素を（<p>のように）ブロック要素として表示する それは新しい行で始まり、幅全体を占めます
contentsコンテナを非表示にして、子要素の子要素をDOMの次のレベルにします
flex要素をブロックレベルのフレックスコンテナとして表示する
grid要素をブロックレベルグリッドコンテナとして表示する
inline-block要素をインラインレベルのブロックコンテナとして表示する 要素自体はインライン要素として書式設定されていますが、高さと幅の値を適用できる
inline-flex要素をインラインレベルのフレックスコンテナとして表示する
inline-grid要素をインラインレベルグリッドコンテナとして表示する
inline-table要素はインラインレベルのテーブルとして表示される
list-item要素を <li>HTML要素のように動作させる
run-inコンテキストに応じて要素をブロックまたはインラインで表示する
  • 実行ボックスにブロックボックスが含まれている場合、実行ボックスはブロックボックスになる
  • ランブルボックスの後に兄弟ブロックボックス（フロートしておらず、絶対的に配置されていない）がある場合、ランインボックスはブロックボックスの最初のインラインボックスになる
  • それ以外の場合は、ランインボックスはブロックボックスになる
table要素が <table>HTML要素のように動作する
table-caption要素が <caption>HTML要素のように動作する
table-column-group要素が <colgroup>HTML要素のように動作する
table-header-group要素が <thead>HTML要素のように動作する
table-footer-group要素を <tfoot>HTML要素のように動作させる
table-row-group要素が <tbody>HTML要素のように動作する
table-cell要素が <td>HTML要素のように動作する
table-column要素を <col>HTML要素のように動作させる
table-row要素が <tr>HTML要素のように動作する
none要素の表示をオフにする。
displayプロパティがnone以外に設定されていても、すべての子要素の表示がオフになる
initialこのプロパティをデフォルト値に設定する
inherit親要素からこのプロパティを継承する

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
DisplayChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯7フルサポート◯1
list-itemフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯6フルサポート◯7フルサポート◯1
inline-blockフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯6フルサポート◯7フルサポート◯1
inline-tableフルサポート◯1フルサポート◯12フルサポート◯3フルサポート◯8フルサポート◯7フルサポート◯1
table,table-cell,table-column,table-column-group,table-footer-group,table-header-group,table-row,table-row-groupフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯8フルサポート◯7フルサポート◯1
flexフルサポート◯29フルサポート◯12フルサポート◯20フルサポート◯11フルサポート◯ありフルサポート◯9
inline-flexフルサポート◯21フルサポート◯12フルサポート◯20フルサポート◯11フルサポート◯ありフルサポート◯6.1
gridフルサポート◯57フルサポート◯16フルサポート◯52フルサポート◯10フルサポート◯44 不明
inline-gridフルサポート◯57フルサポート◯12フルサポート◯52フルサポート◯10フルサポート◯44 不明
subgrid 不明サポートなし✖ 不明サポートなし✖ 不明 不明
ruby,ruby-base,ruby-base-container,ruby-text,ruby-text-container 不明フルサポート◯12フルサポート◯34 不明 不明 不明
run-in未対応 1— 32サポートなし✖サポートなし✖フルサポート◯8未対応 7— 15未対応 1— 8
flow-rootフルサポート◯58 不明フルサポート◯53 不明フルサポート◯45 不明
contentsフルサポート◯65サポートなし✖フルサポート◯37サポートなし✖フルサポート◯52フルサポート◯11.1

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
DisplayAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯あり
list-item 不明 不明 不明 不明 不明 不明 不明
inline-block 不明 不明 不明 不明 不明 不明 不明
inline-table 不明 不明 不明 不明 不明 不明 不明
table,table-cell,table-column,table-column-group,table-footer-group,table-header-group,table-row,table-row-group 不明 不明 不明 不明 不明 不明 不明
flex 不明 不明 不明 不明 不明 不明 不明
inline-flex 不明 不明 不明 不明 不明 不明 不明
gridフルサポート◯57フルサポート◯57 不明フルサポート◯52フルサポート◯44 不明フルサポート◯7.0
inline-gridフルサポート◯57フルサポート◯57 不明フルサポート◯52フルサポート◯44 不明フルサポート◯7.0
subgrid 不明 不明 不明 不明 不明 不明 不明
ruby,ruby-base,ruby-base-container,ruby-text,ruby-text-container 不明 不明 不明 不明 不明 不明 不明
run-in 不明 不明 不明 不明 不明 不明 不明
flow-rootフルサポート◯58フルサポート◯58 不明 不明フルサポート◯45 不明フルサポート◯7.0
contentsフルサポート◯65フルサポート◯65 不明フルサポート◯57フルサポート◯52フルサポート◯11.1サポートなし✖
：Display 関連記事
CSS Display| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS Display | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS