New! 私の44ページの電子書籍「CSS in 44 minutes」が発売されました! 😃

今すぐ入手 →

#display

要素の表示動作を設定します。

display: none;

要素は、あたかも最初からHTMLコードに存在しなかったかのように完全に削除されます。

display: inline;

要素はインライン要素になります。シンプルなテキストのように動作します。

適用されたheightwidth効果がありません

display: block;

要素はブロック要素になります。新しい行から始まり、幅全体を使用します。

display: inline-block;

要素はインライン要素とブロック要素の両方のプロパティを共有します。

  • インラインは要素がシンプルなテキストのように動作し、テキストブロックに挿入されるため
  • heightwidthの値を適用できるためブロック

たとえば、この要素には

.element{
  height: 3em;
  width: 60px;
}

display: list-item;

要素はリスト項目のように動作します。<li>ブロックとの唯一の違いは、リスト項目に箇条書きがあることです。

display: table;

要素はテーブルのように動作します。<table>

そのコンテンツと子要素は、テーブルセルのように動作します。

display: table-cell;

要素はテーブルセルのように動作します。<td>または<th>

そのコンテンツと子要素は、テーブルセルのように動作します。

display: table-row;

要素はテーブル行のように動作します。<tr>

そのコンテンツと子要素は、テーブルセルのように動作します。

display: flex;

要素はflexboxコンテナーになります。それ自体は、ブロック要素のように動作します。

その子要素はflexboxアイテムになります。

display: inline-flex;

要素はインライン要素とflexbox要素の両方のプロパティを共有します。

  • インラインは要素がシンプルなテキストのように動作し、テキストブロックに挿入されるため
  • その子要素がflexboxアイテムになるため、flexbox

たとえば、この要素には

.element{
  height: 3em;
  width: 120px;
}

display: grid;

要素はgridコンテナーになります。それ自体は、ブロック要素のように動作します。

その子要素はgridアイテムになります。

display: inline-grid;

要素はインライン要素とgrid要素の両方のプロパティを共有します。

  • インラインは要素がシンプルなテキストのように動作し、テキストブロックに挿入されるため
  • その子要素がflexboxアイテムになるため、grid

たとえば、この要素には

.element{
  height: 3em;
  width: 120px;
}