CSS display プロパティ

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

使い方

display: type;
type

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

説明
block ブロック要素(前後に改行が入る)にします。
inline インライン要素(前後に改行が入らない)にします。
flex 子要素の並べ方を指定する。
none 要素及びその子孫の要素を表示しない。要素があるスペースには余白が生じない。
list-item リスト項目にします。
run-in前後関係によりブロック要素かインライン要素か決まる。
inline-blockインラインブロック
tableテーブル
inline-tableインラインテーブル
table-row-grouptbody要素と同じ
table-header-groupthead要素と同じ
table_footer-grouptfoot要素と同じ
table-rowテーブルの行(tr要素と同じ)
table-column-groupcolgroup要素と同じ
table-columncol要素と同じ
table-cellテーブルのセル
table-captioncaption要素と同じ
inherit継承

block

ブロック要素(前後に改行が入る)として表示するには、CSSのdisplay属性にblockを指定する。

<span style="display:block">block</span>
<span style="display:block">block</span>

上記のHTMLは、次のように表示される。

block block

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.

flex

CSS属性displayにflexを指定すると、子要素の並べ方を制御できる。

子要素の並べ方を細かく指定するには、display:flexに加えて、次のCSS属性を指定する。

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

CSSのdisplay属性にflexを指定すると、子要素は左から右へ横に並ぶ。

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

子要素を右から左へ横に並べるには、CSS属性flex-directionにrow-reverseを指定する。

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

子要素を上から下へ縦に並べるには、CSS属性flex-directionにcolumnを指定する。

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

子要素を下から上へ縦に並べるには、CSS属性flex-directionにcolumn-reverseを指定する。

<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

inline

インライン要素(前後に改行が入らない)として表示するには、CSSのdisplay属性にinlineを指定する。

<div style="display:inline">inline</div>
<div style="display:inline">inline</div>
inline
inline

list-item

CSSのdisplay属性にlist-itemを指定する例を示す。

<span style="display:list-item">list-item</span>
<span style="display:list-item">list-item</span>

list-item list-item

JavaScriptからCSSのdisplay属性を参照・設定する

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

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

CSSプロパティ

CSSには次のプロパティがある。

参考文献

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