スタッフブログStaffblog

displayの種類について

2020.09.10
スタッフブログ

新入社員の立原です。

本日はコーディングしている際によくお世話になっているdisplayタグについて、どんな種類があるのか疑問になったので調べたことをご紹介しようと思います!

inline:インラインボックスを生成する(初期値)

block:ブロックボックスを生成する

list-item:li要素のようにリスト内容が収められるブロックボックスと、リストマーカーのためのマーカーボックスを生成する

run-in:文脈に応じてブロックまたはインラインボックスのいずれかを作成する

inline-block:インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。

table:table要素のような表示となる

inline-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:td要素のような表示となる

table-caption:caption要素のような表示となる

none:要素が表示されず、レイアウトに影響を与えない

inherit:親要素の値を継承する

flex:ブロックレベルのフレックスコンテナボックスを生成する

inline-flex:インラインレベルのフレックスコンテナボックスを生成する

grid:ブロックレベルのグリッドコンテナボックスを生成する

inline-grid:インラインレベルのグリッドコンテナボックスを生成する

などなど…他にもあるようですが、今回は私がよく使うものと便利だと感じたものをピックアップしてみました。

table系は便利そうだと感じました!

参考サイトはこちらから

この記事をSNSでシェア!