「display」プロパティは、
「ブロック要素」「インライン要素」を変換するプロパティ。

「ブロック要素」を「インライン要素」のように取り扱ったり、
「インライン要素」を「ブロック要素」のように取り扱いたい時などに使用するプロパティ。

「インライン要素」の内容を縦位置の中心に配置する際や、
「float」プロパティなどの配置を指定する際などに、
「ブロック要素」の性質を付加したい時に良く使われる。

「テーブルレイアウト」の機能を使いたい時などにも、
「display」プロパティが使われる。

INDEX

■ 「display」プロパティの書式
■ 「display」プロパティの値

「display」プロパティの書式

display: 値;
display: 外側;
display: 内側;
display: 内部;
display: 外側　内側;
display: 外側　内部;

.クラス名{
display: 値;
}

「display」プロパティのサンプルコード

従来からの値

display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

ボックスの生成

display: none;
display: contents;

2値の構文

display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

その他の値

display: table;
display: table-row;
display: list-item;

グローバル値

display: inherit;
display: initial;
display: revert;
display: unset;

Back

「display」プロパティの値

「display」プロパティの値は、
6つのカテゴリーに分類される。

外側
<display-outside>	要素の「外側」の表示種別を指定する。外側の値のみを指定すると、内側の値は「flow」に設定される。
block	「ブロック要素」へと変換する。「ブロック要素」の前後で改行される。
inline	「インライン要素」へと変換する。「インライン要素」の前後では「改行」されない。


内側
<display-inside>	「display-inside」のキーワードは、要素の内側の表示種別を指定する。要素の内容に対する指定で、レイアウトする整形コンテキストの種類を定義するのに使われる。
flow	「flow」を指定すると、外側の表示種別が、「inline」「run-in」「ブロック」「インラインの整形コンテキストに関係する場合」は、「インラインボックス」を生成し、その他の場合は、「ブロックコンテナーボックス」を生成する。他のプロパティ (position, float, overflow など) の値や、要素自体が「ブロック」か「インライン」の整形コンテキストに関係するかにより、生成される要素が異なる。または、内容物が「親の整形コンテキスト」に吸収される。
flow-root	要素は、新たな「ブロック要素」を生成し、整形ルートがある場所を定義する。
table	HTML の <table> 要素と同じ「ブロック要素」を定義する。
flex	「ブロック要素」のように動作し、「フレックスボックスモデル」に従ってレイアウトする要素を生成する。
grid	「ブロック要素」のように動作し、「グリッドモデル」に従ってレイアウトする要素を生成する。
ruby	HTMLの「<ruby>」要素に変換する。


リスト項目
<display-listitem>	要素は内容のためにブロックボックスと、個別のリスト項目のインラインボックスを生成する。
list-item	単独の値を指定すると、「リスト項目」要素に変換する。


内部
<display-internal>	table や ruby のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。この節ではこれらを「内部」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。
table-row-group	「<tbody>」要素に変換する。
table-header-group	「<thead>」要素に変換する。
table-footer-group	「<tfoot>」要素に変換する。
table-row	「<tr>」要素に変換する。
table-cell	「<td>」要素に変換する。
table-column-group	「<colgroup>」要素に変換する。
table-column	「<col>」要素に変換する。
table-caption	「<caption>」要素に変換する。
ruby-base	「<rb>」要素に変換する。
ruby-text	「<rt>」要素に変換する。
ruby-base-container	これらの要素は無名のボックスとして生成された HTML の <rbc>」要素に変換する。
ruby-text-container	「<rtc>」要素に変換する。


ボックス
<display-box>	これらのキーワードは、要素が表示ボックスを作るかどうかを定義する。
contents	「contents」を指定すると、「擬似ボックス」「子ボックス」に置き換えらる。
none	「none」を指定すると、要素の表示を無くする。要素が通常占める空間を確保はするので、空間すらも表示させない場合は、「visibility: hidden」を指定する。


旧来のもの
<display-legacy>	過去に使われていた値。
inline-block	「inline flow-root」と同じ意味で、外側は「インライン要素」で、中身は「ブロック要素」になる。
inline-table	「inline table」と同じ意味で、「inline-table」を指定すると、 HTMLの「<table>」タグ要素と同じように内容をレイアウトするが、外側は、「インライン要素」。
inline-flex	「inline-flex」と指定すると、「inline flex」と同じ意味で、「インライン要素」だが、内容は、「フレックスボックスモデル」に従ってレイアウトされる。
inline-grid	「inline-grid」と指定すると、「inline grid」と同じ意味で、外側は、「インライン要素」で、内容は、「グリッドモデル」に従ってレイアウトされる。

Back