CSSのdisplayプロパティを値別に解説！上級編！grid, inline-grid, contents, list-item, flow-root
CSSのdisplayプロパティとは
HTMLの要素には、種類があります。
displayプロパティは、要素に対する種類や表示方法を指定できます。
〜 displayプロパティの書き方 〜
セレクタ {
display: 値;
その他スタイル...
}
※値：要素の種類を指定する値
値は、inline、block、inline-block、flexなど様々な種類が用意されています。
本記事は、上級編です。上級者向けな値を紹介します。
CSS
プロパティdisplay:grid
display:gridとは
値 grid は、グリッド要素の指定です。
グリッド要素は、要素を「行（row）」と「列（column）」上に配置させることができます。
〜 グリッド要素のイメージ 〜
〜 グリッドの特徴 〜
〜 display:gridの書き方 〜
セレクタ {
display: grid;
その他スタイル...
}
【コード例1】インライン要素 → グリッド → インライン要素
ブラウザで実行するとこんな感じです。
インライン要素とグリッドの間には改行が入りました。
【コード例2】グリッドの中に、複数の子要素を配置
ブラウザで実行するとこんな感じです。
グリッドは「3列×2行」で定義しています。
グリッドの中に、ブロック要素「アイテム1」〜「アイテム4」が内包されています。
子要素たちは、順に「1行目1列目 → 1行目2列目 → 1行目3列目 → 2行目1列目」とグリッド上に配置されました。
grid-template-columnsプロパティは列の数と幅、grid-template-rowsプロパティは行の数と高さを指定できます。
〜 grid-template-columns/rowsの書き方 〜
セレクタ {
grid-template-columns: 1列目の幅 2列目の幅 3列目の幅 ...;
grid-template-rows: 1行目の高さ 2行目の高さ 3行目の高さ ...;
その他スタイル...
}
【コード例3】グリッドの子要素が複数の列/行をまたぐ
ブラウザで実行するとこんな感じです。
グリッドは「3列×2行」で定義しています。
グリッドの中に、ブロック要素「アイテム1」〜「アイテム4」が内包されています。
アイテム1は「1行目と2行目」をまたぎ、アイテム2は「2列目と3列目」をまたぎました。
grid-columnプロパティは列のまたぐ範囲、grid-rowプロパティは行のまたぐ範囲を指定できます。
〜 grid-column/rowの書き方 〜
セレクタ {
grid-column: 開始の列番号 / 終了の列番号+1;
grid-row: 開始の行番号 / 終了の行番号+1;
その他スタイル...
}
〜 終了部分に+1をする理由 〜
理由は、数える対象が"区切り部分"だからです。
例えば、grid-column: 1/3;と指定した場合、列の一番左の"区切り線"から3つめの"区切り線"までの範囲となります。
3つめの"区切り線"より右にある3列目の"セル"は含まれません。
そうするとgrid-column: 1/3;の結果は、列2つ分またがります。
CSS
プロパティdisplay:inline-grid
display:inline-gridとは
値 inline-grid は、インラインブロックとグリッドの特徴を持つインラインフレックスの指定です。
インライングリッド要素は、要素を「行（row）」と「列（column）」上に配置させることができます。
〜 インライングリッドのイメージ 〜
〜 インライングリッドの特徴 〜
〜 display:inline-gridの書き方 〜
セレクタ {
display: inline-grid;
その他スタイル...
}
【コード例1】インライン要素 → インライングリッド → インライン要素
ブラウザで実行するとこんな感じです。
隣接したインライン要素とグリッド同士は横並びとなりました。
【コード例2】インライングリッドの中に、複数の子要素を配置
ブラウザで実行するとこんな感じです。
インライングリッドは「3列×2行」で定義しています。
インライングリッドの中に、ブロック要素「アイテム1」〜「アイテム4」が内包されています。
子要素たちは、順に「1行目1列目 → 1行目2列目 → 1行目3列目 → 2行目1列目」とインライングリッド上に配置されました。
grid-template-columnsプロパティは列の数と幅、grid-template-rowsプロパティは行の数と高さを指定できます。
〜 grid-template-columns/rowsの書き方 〜
セレクタ {
grid-template-columns: 1列目の幅 2列目の幅 3列目の幅 ...;
grid-template-rows: 1行目の高さ 2行目の高さ 3行目の高さ ...;
その他スタイル...
}
CSS
プロパティdisplay:contents
display:contentsとは
値 contents は、自身を非表示にして、子要素は表示させる指定です。
例えば、HTMLの階層構造が「親要素 → contents要素 → 子要素」の場合、 実際の表示は「親要素 → 子要素」となります。
〜 contents要素のイメージ 〜
〜 display:contentsの書き方 〜
セレクタ {
display: contents;
その他スタイル...
}
【コード例】contents要素の中に、子要素を配置
ブラウザで実行するとこんな感じです。
contents要素に指定した 背景色グレー が表示されません。
"display: contents;"の指定をはずすと、要素が表示されるため背景色がグレーとなります。
CSS
プロパティdisplay:list-item
display:list-itemとは
値 list-item は、指定するとliタグと同じ要素となります。
リストの項目に使うタグです。
〜 display:list-itemの書き方 〜
セレクタ {
display: list-item;
その他スタイル...
}
【コード例】list-item要素でリストを定義
ブラウザで実行するとこんな感じです。
"display: list-item;" を指定した要素について、ulタグ内では"・"、olタグ内では"2."が先頭につきました。
CSS
プロパティdisplay:flow-root
display:flow-rootとは
値 flow-root は、子要素にfloatプロパティが使われるときに使います。
通常、子要素にfloatプロパティを使うと、それを内包する親要素の高さは0となるんです。
そこで親要素にdisplay:flow-rootを指定すると、親要素の高さを維持できます。
floatプロパティは、要素を横並びにしたり位置を指定することができます。
フレックスボックスやグリッド要素がなかった頃、横並びさせるためにfloatプロパティがよく使われていました。
〜 floatプロパティの書き方 〜
セレクタ {
float: 配置の方向;
その他スタイル...
}
〜 値 (配置の方向) 〜
| left |
要素を左に配置し、右側に他の要素を回り込ませる。 |
|---|---|
| right |
要素を右に配置し、左側に他の要素を回り込ませる。 |
| none |
floatの指定なし |
〜 display:flow-rootの書き方 〜
セレクタ {
display: flow-root;
その他スタイル...
}
【コード例】flow-root要素で高さ維持(floatの影響回避)
ブラウザで実行するとこんな感じです。
"display: flow-root;" を指定した要素について、中身に合わせた高さが維持されています。
"display: flow-root;"がないと...
高さが中身に合いません。