ホーム(記事一覧)へ

CSS displayの書き方・一覧【23種説明】

CSSのdisplayを使うことでhtmlタグの本来の動きを変化させることができます。

displayで使える値はたくさんあります。ただし、以下で紹介する23種が現実なところでしょう。

CSS displayの書き方を23種デモ付きで全部説明します!

利用頻度の高いdisplay

利用頻度の高いdisplay5つを紹介します。

この5つを覚えておけば他のdisplayは覚えなくても困りません。

display:block

divを代表とするブロック要素にするCSSです。

特徴

  • 箱として扱われる
  • 兄弟要素を縦に配置する
  • widthを指定しない場合横幅いっぱいになる

 

display: block display: block display: block

 

<style>
.block>span{
	display: block;
	border: 1px solid #000;
	padding: 10px;
	background: #f2f2f2;	
}
</style>
<div class="block">
	<span>display: block</span>
	<span>display: block</span>
	<span>display: block</span>
</div>

ブロック要素・インライン要素って何?というかたはこちら↓

display:inline

spanを代表とするインライン要素にするCSSです。

特徴

  • テキストと同様に扱われる
  • 兄弟要素を横に配置する
  • widthは指定できない(子要素の最小値になる)

 

display: inline
display: inline
display: inline

 

<style>
.inline>div{
	display: inline;
	border: 1px solid #000;
	padding: 10px;
	background: #f2f2f2;
	width: 100px;
}
</style>
<div class="inline">
	<div>display: inline</div>
	<div>display: inline</div>
	<div>display: inline</div>
</div>

display:inline-block

ブロック要素の特徴を持ちつつインライン要素の特徴を合わせ待ったCSSです。

特徴

  • 箱として扱われる
  • 兄弟要素を横に配置する
  • widthを指定できる。指定しない場合、子要素の最小値になる

 

display: inline-block
display: inline-block
display: inline-block

<style>
.inline-block>div{
	display: inline-block;
	border: 1px solid #000;
	padding: 10px;
	background: #f2f2f2;
	width: 100px;
}
</style>
<div class="inline-block">
	<div>display: inline-block</div>
	<div>display: inline-block</div>
	<div>display: inline-block</div>
</div>

display:none

指定したhtml要素とその子孫要素すべてを消します。display:blockとセットで使われることが多いです。

消えるのでデモの表示のしようがありません。

ソースだけお見せします。

<style>
.none{
	display: none;
}
</style>
<div class="none">display: none</div>

display:noneの要素にそれ以外のdisplayを上書きで指定すると表示されるようになります。

display:flex

横並びや上下左右中央寄せなどレイアウトに関する調整ができるCSSです。

非常にたくさんのことができるので下記記事でご確認ください。

特徴

  • レイアウト調整に用いられる
  • 横並びなどができる
  • display:flexは横並べにしたい要素の親要素に指定する

 

display: flex
display: flex
display: flex

 

<style>
.flex{
	display: flex;
}
.flex>div{
	border: 1px solid #000;
	padding: 10px;
	background: #f2f2f2;
	width: 100px;
}
</style>
<div class="flex">
	<div>display: flex</div>
	<div>display: flex</div>
	<div>display: flex</div>
</div>

table関連display

htmlのtable関連タグと同じ効果を得ることができます。

一覧

左列のdisplayで指定すると右列のhtmlと同じ要素となります。

display(CSS) html
table table
table-caption caption
table-column-group colgroup
table-column col
table-header-group thead
table-row-group tbody
table-row tr
table-cell td
table-footer-group tfoot

thにあたるdisplayはないため「table-cell」にCSSで調整しましょう。

実際にhtmlでつくった表とCSSdisplayで作った表を見比べてみましょう

html版

表のタイトル
タイトル1 タイトル2 タイトル3
その1 1 2
その2 3 4
その3 5 6
合計 9 12
<table>
  <caption>
  表のタイトル
  </caption>
  <colgroup>
	  <col span="1" style="width:100px; background:#FF3300;">
	  <col span="2" style="background:#FFCC00;">
  </colgroup>
  <thead>
    <tr>
      <th>タイトル1</th>
      <th>タイトル2</th>
      <th>タイトル3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>その1</th>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <th>その2</th>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <th>その3</th>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>合計</th>
      <td>9</td>
      <td>12</td>
    </tr>
  </tfoot>
</table>

CSS版

表のタイトル
タイトル1
タイトル2
タイトル3
その1
1
2
その2
3
4
その3
5
6
<style>
	.table{
		display: table;/*table*/
		border-spacing: 2px;
	}
	.table-caption{
		display: table-caption;/*caption*/
		text-align: center;
	}
	.table-column-group{
		display: table-column-group;/*colgroup*/
	}
	.table-column{
		display: table-column;/*col*/
	}
	.table-header-group{
		display: table-header-group;/*thead*/
	}
	.table-row-group{
		display: table-row-group;/*tbody*/
	}
	.table-row{
		display: table-row;/*tr*/
	}
	.table-cell{
		display: table-cell;/*td*/
		padding: 1px;
	}
	.table-cell-th{
		display: table-cell;/*td*/
		text-align: center;
		font-weight: bold;
		padding: 1px;
	}
	.table-footer-group{
		display: table-footer-group;/*tfoot*/
	}
</style>
<div class="table">
  <div class="table-caption">
  表のタイトル
  </div>
  <div class="table-column-group">
	  <div class="table-column" style="width:100px; background:#FF3300;"></div>
	  <div class="table-column" style="background:#FFCC00;"></div>
	  <div class="table-column" style="background:#FFCC00;"></div>
  </div>
  <div class="table-header-group">
    <div class="table-row">
      <div class="table-cell-th">タイトル1</div>
      <div class="table-cell-th">タイトル2</div>
      <div class="table-cell-th">タイトル3</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell-th">その1</div>
      <div class="table-cell">1</div>
      <div class="table-cell">2</div>
    </div>
    <div class="table-row">
      <div class="table-cell-th">その2</div>
      <div class="table-cell">3</div>
      <div class="table-cell">4</div>
    </div>
    <div class="table-row">
      <div class="table-cell-th">その3</div>
      <div class="table-cell">5</div>
      <div class="table-cell">6</div>
    </div>
  </div>
  <div class="table-footer-group">
    <div class="table-row">
      <div class="table-cell-th">合計</div>
      <div class="table-cell">9</div>
      <div class="table-cell">12</div>
    </div>
  </div>
</div>

ほぼ同じですね。

divだけで表を作りましたが、逆にtableを全部divのようにblock要素にすることもできます。table以下の要素に「display:block」を指定すればいいわけです。

ここまで複雑な表をわざわざCSSで作ることはさすがにありませんが、横並べができればいいだけの表であればdisplay:tableとtable-cellだけで作成可能です。

新しいレイアウト要素 display:grid

調査中です。

かなり便利なことはわかったのですが、だいぶ複雑なのでちゃんと勉強したら更新します。

inlineにするdisplay

もともとの特徴をもちつつ、兄弟要素を横配置にできます。あまり使うことはありません。

  • display:inline-flex
  • display:inline-table
  • display:inline-grid

liにするdisplay:list-item

htmlのliタグと同じようになります。

liタグをdisplay:noneなどから戻すときはdisplay:list-itemを指定することになります。

display:list-item
<style>
.list-item{
    display: list-item;
    margin-left: 20px;
}
</style>
<div class="list-item">display:list-item</div>

ブラウザによって使えないため実用性が低いdisplay

以下はブラウザによって(というかほぼIEが)使えないため実用性が低いdisplayです。

覚えなくていいです。

display:contents

ボックスに関するCSSが効かなくなり、文字に関するCSSだけ効きます。

下記の2つは「display:contents」を指定したかしていないかだけの違いです。

display:contentsを指定した場合

テキストテキスト
<style>
.contents{
    display: contents;
    border: 1px solid #000;
    padding: 10px;
    background: #f2f2f2;
    color: red;
    font-weight: bold;
    font-size: 120%;
}
</style>
<div class="contents">テキストテキスト</div>

display:contentsを指定しない場合

テキストテキスト
<style>
.no-contents{
    /*display: contents;*/
    border: 1px solid #000;
    padding: 10px;
    background: #f2f2f2;
    color: red;
    font-weight: bold;
    font-size: 120%;
}
</style>
<div class="no-contents">テキストテキスト</div>

display:contentsのブラウザ対応状況

display:flow-root

floatを解除するoverflowの代わりに使います。もちろんclear:bothもいりません。

ただしfloat自体使わなくなってきました。

display:flow-rootを指定した場合

display:flow-root
display:flow-root
display:flow-root
display:flow-root

下の要素が回り込みません。

<style>
.flow-root{
    display: flow-root;
}
.flow-root>div{
    width: 50%;
    box-sizing: border-box;
    border: 1px solid #000;
    padding: 10px;
    background: #f2f2f2;
    float: left;		
}
</style>
<div class="flow-root">
  <div>display:flow-root<br>
    display:flow-root</div>
  <div>display:flow-root</div>
</div>
<div>display:flow-root</div>

display:flow-rootを指定しない場合

display:flow-root
display:flow-root
display:flow-root
display:flow-root

下の要素が回り込んでしまっています。

<style>
.no-flow-root{
    /*display: flow-root;*/
}
.no-flow-root>div{
    width: 50%;
    box-sizing: border-box;
    border: 1px solid #000;
    padding: 10px;
    background: #f2f2f2;
    float: left;		
}
</style>
<div class="no-flow-root">
  <div>display:flow-root<br>
    display:flow-root</div>
  <div>display:flow-root</div>
</div>
<div>display:flow-root</div>

display:flow-rootのブラウザ対応状況

display:run-in

直後の要素がblockならinlineに、inlineならblockになるようです。

どんな場面で使うのかイメージがわきません。

使わないので覚えなくていいです。

IEでしか使えません。

 

1テキストテキスト
2テキストテキスト
3テキストテキスト
4テキストテキスト 5テキストテキスト 6テキストテキスト

 

<style>
.run-in_wrap *{
    border: 1px solid #000;
    padding: 10px;
    background: #f2f2f2;		
}
.run-in{
    display: run-in;
}
</style>
<div class="run-in_wrap">
  <div class="run-in">1テキストテキスト</div>
  <div>2テキストテキスト</div>
  <div>3テキストテキスト</div>
  <span class="run-in">4テキストテキスト</span> <span>5テキストテキスト</span> <span>6テキストテキスト</span> </div>

display:run-inのブラウザ対応状況

display:initial

「initial」はデフォルトに戻すCSSの値です。解除にも使えます。

displayに限らず どのCSSプロパティにも使えるがIEでは使えません。

以下はdisplay:flexを指定した要素にdisplay:initialを上書き指定した例です。

 

display:initial
display:initial

 

<style>
.initial{
    display: flex;
    display: initial;
}
.initial>div{
    border: 1px solid #000;
    padding: 10px;
    background: #f2f2f2;		
}
</style>
<div class="initial">
  <div>display:initial</div>
  <div>display:initial</div>
</div>

display:initialのブラウザ対応状況

【まとめ】display一覧

display:block ブロック要素にする
display:inline インライン要素にする
display:inline-block ブロック要素とインライン要素の特徴を合わせ待つ
display:none 消す
display:flex 横並びや上下左右中央寄せなどレイアウトに関する調整ができる
display:table table
display:table-caption caption
display:table-column-group colgroup
display:table-column col
display:table-header-group thead
display:table-row-group tbody
display:table-row tr
display:table-cell td
display:table-footer-group tfoot
display:grid グリッドレイアウトにできる
display:inline-flex 横並べできるflex
display:inline-table 横並べできるtable
display:inline-grid 横並べできるgrid
display:list-item li
display:contents ボックスに関するCSSが効かなくなり、文字に関するCSSだけ効く
display:flow-root floatを解除するoverflowの代わりに使う。
display:run-in 直後の要素がblockならinlineに、inlineならblockになる
display:initial デフォルトに戻す

以上、CSS displayの書き方【23種説明】でした。

関連記事