CSSリファレンス
displayの意味と使い方
「display」は要素が生成するボックスの種類を指定するプロパティです。
なお、フレキシブルボックスやグリッドレイアウトでも、displayプロパティでレイアウト用のボックスを定義します。positionプロパティやfloatプロパティを使ったレイアウト方法に比べ、より簡単にレイアウトを指定できるようになります。
ボックスのサイズや配置を柔軟に調整できるレイアウト方法を、フレキシブルボックスレイアウトといいます。これまでのpositionプロパティやfloatプロパティを使ったレイアウト方法に比べ、より簡単にレイアウトを指定できるようになります。
グリッドレイアウトとは、表示領域を縦横に分割して作成されたマス目の中に、コンテンツを配置していくレイアウト方法のことです。これまでのようなpositionプロパティで配置を指定したレイアウトよりも、柔軟で流動的なレイアウトが可能になります。
値の指定方法
inline
その要素をインラインボックスとして表示する。
block
その要素をブロックボックスとして表示する。
inline-block
その要素をインラインレベルのブロックボックスとして表示します。この値を指定した要素は、ブロックレベル要素になりますが、表示される場合にはインライン要素のように配置されます。
list-item
その要素に通常にブロックレベルのボックスと、リスト項目のマーク用ボックスを生成します。、リストの項目のように表示されます。
run-in
その要素をランインボックスとして表示します。ランインボックスは、ブロックボックスが次に続く場合に、そのブロックボックス内の先頭にインラインボックスとして配置されるボックスです。ただし、後続のボックスにフロートや絶対配置が指定されている場合には、ランインボックスの通常のブロックボックスとして扱われ、後続のボックス内には配置されません。
table
その要素をtable要素のように表示します。
inline-table
その要素をtable要素のように表示します。
table-row-group
その要素をtbody要素のように表示します。
table-header-group
その要素をthead要素のように表示します。
table-footer-group
その要素をtfoot要素のように表示します。
table-row
その要素をtr要素のように表示します。
table-column-group
その要素をcolgroup要素のように表示します。
table-column
その要素をcol要素のように表示します。
table-cell
その要素をth、td要素のように表示します。
table-caption
その要素をcaption要素のように表示します。
none
その要素のボックスを表示しません。ボックスそのものが生成されないので、レイアウトにも影響しません。
flex
この値が指定された要素を、ブロックレベルのフレックス・コンテナ・ボックスにします。
inline-flex
この値が指定された要素を、インラインレベルのフレックス・コンテナ・ボックスにします。
grid
この値が指定された要素を、ブロックレベルのグリッド要素にします。
inline-grid
この値が指定された要素を、インラインレベルのグリッド要素にします。