displayでブロックやインラインなどの要素を指定【CSS】

displayプロパティは、ブロック要素やインライン要素など、要素の種類を指定するプロパティです。

{display: 種類;}

値の指定方法

displayプロパティでは、以下のような値を指定することができます。

none

noneを指定すると、ボックスは生成されず、レイアウト上も存在しないものとして扱われるので、レイアウトに影響はありません。

block

blockを指定すると、ブロックボックスとして表示されます。

inline

inlineを指定すると、インラインボックスとして表示されます。

inline-block

inline-blockを指定すると、インラインボックスのように扱えるブロックボックスとして表示されます。

つまり、要素自体はインライン要素のように表示されるが、高さや幅を指定できるということ。

list-item

list-itemを指定すると、リストマーカーのためのマーカーボックスとli要素のようなリスト内容が収められるブロックボックスのセットとして表示されます。

run-in

run-inを指定すると、ブロックボックスを内包している場合はブロックボックスとして表示され、floatプロパティや絶対配置が指定されていないブロックボックスが後に続く場合は、そのブロックボックスの最初のインラインボックスとして表示されます。

table

tableを指定すると、HTMLのtable要素のように表示されます。

inline-table

inline-tableを指定すると、HTMLのtable要素のように扱える、インラインボックスとして表示されます。

table-header-group

table-header-groupを指定すると、HTMLのthead要素のように表示されます。

table-footer-group

table-footer-groupを指定すると、HTMLのtfoot要素のように表示されます。

table-row-group

table-row-groupを指定すると、HTMLのtbody要素のように表示されます。

table-row

table-rowを指定すると、HTMLのtr要素のように表示されます。

table-column-group

table-column-groupを指定すると、HTMLのcolgroup要素のように表示されます。

table-column

table-columnを指定すると、HTMLのcol要素のように表示されます。

table-cell

table-cellを指定すると、HTMLのtd要素のように表示されます。

table-caption

table-captionを指定すると、HTMLのcaption要素のように表示されます。