CSS display プロパティ

displayはHTML要素の表示方法を指定するCSSプロパティです。非表示(none）にしたり、ブロック要素(block）にしたり、インラインブロック（inline-block）にするなど、デフォルトの表示方法から変更できます。

使い方

display: type;
type

表示要素の種別を、次のいずれかから指定する。

値 説明
run-in 前後関係によりブロック要素かインライン要素か決まる。
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 テーブルのセル
table-caption caption要素と同じ
block
ブロック要素として表示する。 
<span style="display:block">first</span>
<span style="display:block">second</span>
<span style="display:block">third</span>
first second third
flex
フレキシブル・ボックス（フレックスボックス）のコンテナとして表示する。

子要素（フレキシブル・ボックスのアイテム）の並べ方を細かく指定するには、display:flexに加えて、以下に示すCSSプロパティを指定する。

属性 説明
flex-direction 子要素を並べる方向と向きを指定する。
justify-content 子要素の水平方向の配置を指定する。
align-items 子要素の垂直方向の配置を指定する。

フレキシブルボックスのコンテナ内にアイテムを左から右へ横に並べる。

<div style="display:flex;">
  <div>child1</div>
  <div>child2</div>
  <div>child3</div>
</div>
child1
child2
child3

フレキシブルボックスのコンテナ内にアイテムを右から左へ横に並べる。

<div style="display:flex; flex-direction:row-reverse;">
  <div>child1</div>
  <div>child2</div>
  <div>child3</div>
</div>
child1
child2
child3

フレキシブルボックスのコンテナ内にアイテムを上から下へ縦に並べる。

<div style="display:flex; flex-direction:column;">
  <div>child1</div>
  <div>child2</div>
  <div>child3</div>
</div>
child1
child2
child3

フレキシブルボックスのコンテナ内にアイテムを下から上へ縦に並べる。

<div style="display:flex; flex-direction:column-reverse;">
  <div>child1</div>
  <div>child2</div>
  <div>child3</div>
</div>
child1
child2
child3

子要素を中央揃えにするには、CSSのjustify-content属性にcenterを指定する。

<div style="display:flex; justify-content:center;">
  <div>child1</div>
  <div>child2</div>
  <div>child3</div>
</div>
child1
child2
child3

子要素を右揃えにするには、CSSのjustify-content属性にflex-endを指定する。

<div style="display:flex; justify-content:flex-end;">
  <div>child1</div>
  <div>child2</div>
  <div>child3</div>
</div>
child1
child2
child3

子要素を両端揃えにするには、CSSのjustify-content属性にspace-betweenを指定する。

<div style="display:flex; justify-content:space-between;">
  <div>child1</div>
  <div>child2</div>
  <div>child3</div>
</div>
child1
child2
child3

子要素を水平方向に均等に配置するには、CSSのjustify-content属性にspace-aroundを指定する。

<div style="display:flex; justify-content:space-around;">
  <div>child1</div>
  <div>child2</div>
  <div>child3</div>
</div>
child1
child2
child3

子要素を垂直方向で下揃えに配置するには、CSSのalign-items属性にflex-endを指定する。

<div style="display:flex; align-items:flex-end;">
  <div>child1</div>
    <div>
      <div>child2.1</div>
      <div>child2.2</div>
      <div>child2.3</div>
    <div>
  <div>child3</div>
</div>
child1
child2.1
child2.2
child2.3
child3

子要素を垂直方向で中央揃えに配置するには、CSSのalign-items属性にcenterを指定する。

<div style="display:flex; align-items:center;">
  <div>child1</div>
    <div>
      <div>child2.1</div>
      <div>child2.2</div>
      <div>child2.3</div>
    <div>
  <div>child3</div>
</div>
child1
child2.1
child2.2
child2.3
child3
grid
グリッド・レイアウトとして表示する 
<div style="display: grid;">
  <div>first</div>
  <div>second</div>
  <div>third</div>
</div>
first
second
third
inherit
親要素の display プロパティの値を継承する。
inline
インライン要素として表示する。 
<div style="display:inline">first</div>
<div style="display:inline">second</div>
<div style="display:inline">third</div>
first
second
third
inline-block
インライン・ブロック要素として表示する。 
<div style="display:inline-block">first</div>
<div style="display:inline-block">second</div>
<div style="display:inline-block">third</div>
first
second
third
list-item
リスト項目として表示する。 
<span style="display:list-item">first</span>
<span style="display:list-item">second</span>
<span style="display:list-item">third</span>

first second third

none
要素及びその子孫の要素を表示しない。要素があるスペースには余白が生じない。

CSSのdisplay属性にnoneを指定する例を示す。

Here is <span style="display:none">none</span> element.

Here is none element.

「display:none」は要素を表示しないうえ、余白も生じない。余白を残したい場合は、「visibility:hidden」を使用する。

Here is <span style="visibility:hidden">hidden</span> element.

Here is hidden element.

JavaScript

JavaScriptからCSSプロパティ「display」を参照・設定するには、Elementオブジェクトのstyleプロパティを使う。

<div id="foo">example</div>
<script>
  document.getElementById("foo").style.display = "none";
</script>

関連記事

参考文献

World Wide Web Consortium (2021) CSS Display Module Level 3