概要へ移動

このページで解説するコードの実行結果。(タイトルの文字列をクリックすると、コードに移動)

child-1
child-2
child-3
child-1 child-2 child-3
child-1
child-2
child-3
child-1 child-2 child-3
child-1
child-2
child-3
child-1 child-2 child-3
child-1
child-2
child-3
child-1 child-2 child-3
child-1
child-2
child-3
child-1 child-2 child-3
child-1
child-2
child-3
child-1 child-2 child-3
child-1
child-2
child-3
child-1 child-2 child-3
child-1
child-2
child-3
child-1 child-2 child-3
child-1
child-2
child-3
child-1 child-2 child-3

displayの概要

ブロック要素/インライン要素などの切り替えを設定する。

(表) displayの設定値
設定値要素並び
blockブロック要素縦(↓)
inline-blockブロック要素横(→)
inlineインライン要素横(→)
list-itemブロック要素(リスト形式)縦(↓)
none非表示(要素を削除)

ブロック要素/インライン要素

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS
.parent {
border: solid orange; /* 境界線 */
margin: 7px; /* 外側の余白 */
padding: 1em; /* 内側の余白 */
box-shadow: 0 0 3px orangered;
}
.children {
border: solid blue; /* 境界線 */
margin: 7px; /* 外側の余白 */
padding: 1em; /* 内側の余白 */
background-color: #dde;
}
HTML : 適用するHTML
<div class="parent">
<div class="children child-1"> child-1 </div>
<div class="children child-2"> child-2 </div>
<div class="children child-3"> child-3 </div>
</div>
<div class="parent">
<span class="children child-1"> child-1 </span>
<span class="children child-2"> child-2 </span>
<span class="children child-3"> child-3 </span>
</div>
実行結果
child-1
child-2
child-3
child-1 child-2 child-3

実行結果に2つのオレンジのボックスが見える。

異なる点は以下。

  • 上のボックスの中には<div>要素が入っている
  • 下のボックスの中には<span>要素が入っている

<div>要素は(デフォルトでは)ブロック要素なので縦並びになっており、<span>要素は(デフォルトでは)インライン要素なので横並びになっている。

<div>要素ブロック要素縦並び(=改行がある)
<span>要素インライン要素横並び(=改行がない)

block : 縦並びのブロック要素

子要素にdisplay: block;を指定すると、全ての要素はブロック要素(縦並び)になる。

<span>要素はインライン要素であるが、(<div>要素のような)ブロック要素として扱われるようになる。

CSS : block
.children {
display: block;
}
実行結果
child-1
child-2
child-3
child-1 child-2 child-3

inline : 横並びのインライン要素

子要素にdisplay: inline;を指定すると、全ての要素はインライン要素(横並び)になる。

<div>要素はブロック要素であるが、(<span>要素のような)インライン要素として扱われるようになる。

インライン要素は「高さが無い要素」として扱われるので、親要素の子要素の間のスペースが無いことに注意。

CSS : inline
.children {
display: inline;
}
実行結果
child-1
child-2
child-3
child-1 child-2 child-3

inline-block : 横並びのブロック要素

子要素にdisplay: inline-block;を指定すると、全ての要素はインライン・ブロック要素になる。

インライン・ブロック要素はインライン要素のように横並びになるが、ブロック要素のように高さは維持される。

一般的に、縦並びのブロック要素を横並びにしたい場合、inline-blockにするとよい。

CSS : inline-block
.children {
display: inline-block;
}
実行結果
child-1
child-2
child-3
child-1 child-2 child-3

list-item : リスト

子要素にdisplay: list-item;を指定すると、全ての要素はリスト形式になる。

CSS : list-item
.children {
display: list-item;
}
実行結果
child-1
child-2
child-3
child-1 child-2 child-3

なお、list-itemを設定すると、リスト(<ul><ol><li>)と同じ扱いになる。よって、以下のCSSプロパティも設定可能になる。

CSSプロパティ設定内容
list-style-typeマーカーの種類
list-style-imageマーカーに画像ファイルを設定する
list-style-positionマーカーの位置

list-style-type

CSS : list-item
.parent {
list-style-type: circle;
}
.children {
display: list-item;
}
実行結果
child-1
child-2
child-3
child-1 child-2 child-3

list-style-image

CSS : list-item
.parent {
list-style-image: url( '/img/list-style-image1.png' );
}
.children {
display: list-item;
}
実行結果
child-1
child-2
child-3
child-1 child-2 child-3

list-style-position

CSS : list-item
.parent {
list-style-position: inside;
}
.children {
display: list-item;
}
実行結果
child-1
child-2
child-3
child-1 child-2 child-3

none : 非表示

display: none;を指定すると、全ての要素は削除され、非表示になる。

CSS : none
.children {
display: none;
}
実行結果
child-1
child-2
child-3
child-1 child-2 child-3

visibility: hiddenとの違い

visibilityも要素を非表示にする。その違いな何か?

CSS : none
.children {
visibility: hidden;
}
実行結果
child-1
child-2
child-3
child-1 child-2 child-3

その違いは上記結果から明らかであるが、 visibility: hidden;の場合、要素あったエリアは保存される。

一方、display: none;にするとエリアは詰められて無くなる。

CSS空いたエリア
display: none;詰められる
visibility: hidden;空けたまま

Emmet : d

記述Visual Studio Code
ddisplay: block;
didisplay: inline;
dibdisplay: inline-block;
dldisplay: list-item;
dndisplay: none;