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-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要素と同じ
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属性を指定する。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

子要素を垂直方向で下揃えに配置するには、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>

子要素を垂直方向で中央揃えに配置するには、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>

inline

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

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

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には次のプロパティがある。

参考文献

W3C (2021) CSS Display Module Level 3