Webデザイナーブログから学ぶホームページ制作

「display」プロパティは、ブロックレベル要素をインラインで表示したり、インライン要素をブロックレベルで表示指定するCSSプロパティです。
主にレイアウトの要素を指定する為に使われます。

ブロック要素とインライン要素を指定する値は「block」「inline」「inline-block」「flex」「inline-flex」「grid」「inline-grid」「list-item」「table」「inline-table」「table-header-group」「table-footer-group」「table-row-group」「table-row」「table-column-gruop」「table-column」「table-cell」「table-caption」などの値を指定することができます。

ブロックレベル要素をインラインで表示したり、インライン要素をブロックレベルで表示指定する場合は、「display」プロパティを使い適応する値を指定することで実装できます。

セレクタ{
display:ブロックレベル要素を処理;
}

/* 基本値 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: list-item;
display: table;
display: inline-table;
display: table-header-group;
display: table-footer-group;
display: table-row-group;
display: table-row;
display: table-column-gruop;
display: table-column;
display: table-cell;
display: table-caption;