CSS | display | インライン・ブロック要素

displayはインライン要素やブロック要素を指定するためなどに使うCSSプロパティです。このページではnone、inline、inline-block、block、list-itemについて解説しています。display: flex(フレックス・ボックス)については別ページで解説します。

`display`の設定値
設定値	意味
`none`	非表示(要素の削除)
`inline`	インライン要素
`inline-block`	インライン・ブロック要素
`block`	ブロック要素
`list-item`	リストアイテム(リスト形式のブロック要素)
`flex`	フレックス・ボックス

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

実行結果初期状態

div-1

div-2

div-3

div-4

div-5

`display: none`

displayプロパティにnoneを指定すると要素は削除され、結果として非表示になります。

下は.div-2と.div-4のクラスにdisplay: noneを設定した例です。.div-2と.div-4は非表示になります。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

CSS


.div-2,
.div-4 {
    display: none;
}

実行結果none

div-1

div-2

div-3

div-4

div-5

`visibility: hidden`との違い

display: noneとvisibility: hiddenは共に要素を非表示にするため混同されますが、結果は異なりますので注意してください。

.div-2にvisibility: hidden、.div-4にdisplay: noneを設定してみます。 .div-2(visibility: hidden)の方は見えませんが要素は存在しています。よって(.div-1と.div-3の間のスペースである)表示エリアも確保されたままです。一方、.div-4(display: none)の方は要素自体が削除され存在していません。よって、表示エリアも無くなります。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

CSS


.div-2 {
    visibility: hidden; /* 要素は存在 */
}

.div-4 {
    display: none; /* 要素は削除される */
}

実行結果visibility: hidden

div-1

div-2

div-3

div-4

div-5

注意 : 隠せません

display: noneやvisibility: hiddenでブラウザ上から非表示にしてもHTMLのコード上には残っています。よって、ユーザー(閲覧者)に見せたくない情報をdisplay: noneやvisibility: hiddenで隠すことはできません。

`display: inline`

displayプロパティにinlineを指定するとインライン要素になります。

下は.sampleのクラスにdisplay: inlineを設定した例です。 <div>要素は元々ブロック要素ですが、インライン要素になっています。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

CSS


.sample {
    display: inline;
}

実行結果inline

div-1

div-2

div-3

div-4

div-5

インライン要素であることを確認するためにheightプロパティを設定してみます。 .div-2と.div-4にheightプロパティを設定しても高さに変化がないのでインライン要素であると言えます。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

CSS


.sample {
    display: inline;
}

.div-2 { height: 4rem; }
.div-4 { height: 5rem; }

実行結果heightは無効

div-1

div-2

div-3

div-4

div-5

後述しますが、displayをinline-blockに設定するとインライン・ブロック要素になるため高さが変化します。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

CSS


.sample {
    display: inline-block;
}

.div-2 { height: 4rem; }
.div-4 { height: 5rem; }

実行結果heightは有効

div-1

div-2

div-3

div-4

div-5

`display: block`

displayプロパティにblockを指定するとブロック要素になります。

<div>要素は元々ブロック要素であるので、インライン要素である<span>を使ったコードを準備します。 displayプロパティにblockを指定するとブロック要素になります。

HTML


<span class="sample span-1">span-1</span>
<span class="sample span-2">span-2</span>
<span class="sample span-3">span-3</span>
<span class="sample span-4">span-4</span>
<span class="sample span-5">span-5</span>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

実行結果初期状態

span-1 span-2 span-3 span-4 span-5

HTML


<span class="sample span-1">span-1</span>
<span class="sample span-2">span-2</span>
<span class="sample span-3">span-3</span>
<span class="sample span-4">span-4</span>
<span class="sample span-5">span-5</span>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

CSS


.sample {
    display: block;
}

実行結果block

span-1 span-2 span-3 span-4 span-5

縦並びであり、heightで高さを変えることができるのでブロック要素であることが分かります。

HTML


<span class="sample span-1">span-1</span>
<span class="sample span-2">span-2</span>
<span class="sample span-3">span-3</span>
<span class="sample span-4">span-4</span>
<span class="sample span-5">span-5</span>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

CSS


.sample {
    display: block;
}

.span-2 { height: 4rem; }
.span-4 { height: 5rem; }

実行結果heightは有効

span-1 span-2 span-3 span-4 span-5

`display: inline-block`

displayプロパティにinline-blockを指定するとインライン・ブロック要素になります。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

CSS


.sample {
    display: inline-block;
}

実行結果inline-block

div-1

div-2

div-3

div-4

div-5

inline-blockの場合は横並びですが、heightで高さを変えることができるのでインライン・ブロック要素であることが分かります。 inlineに変更すると高さを変えることができなくなります。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

CSS


.sample {
    display: inline-block;
}

.div-2 { height: 4rem; }
.div-4 { height: 5rem; }

実行結果inline-block: heightは有効

div-1

div-2

div-3

div-4

div-5

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

CSS


.sample {
    display: inline;
}

.div-2 { height: 4rem; }
.div-4 { height: 5rem; }

実行結果inline: heightは無効

div-1

div-2

div-3

div-4

div-5

使い方の指針

`inline`と`block`

作るHTML要素を「インライン要素」にしたいのか、「ブロック要素」のしたいのかを決めます。

インライン要素にしたい場合 → <span>要素を使います。
ブロック要素にしたい場合 → <div>要素を使います。

これで良いのですが「動的に」インライン要素とブロック要素を切り替えたい場合、JavaScriptでdisplay: inlineとdisplay: blockを切り替えます。

`inline-block`

インライン要素の特徴である「横並び」を使いながら、ブロック要素の特徴である「高さの指定」をしたい場合、display: inline-blockを指定します。

`none`

ボタンをクリックすると特定の要素を非表示にする機能がありますが、これはdisplay: noneをJavaScriptで設定することで実現しています。

`display: list-item`

displayプロパティにlist-itemを指定するとリストアイテム(リスト形式のブロック要素)になります。個々の要素はブロック要素なので高さを変えることができます。

HTML


<span class="sample span-1">span-1</span>
<span class="sample span-2">span-2</span>
<span class="sample span-3">span-3</span>
<span class="sample span-4">span-4</span>
<span class="sample span-5">span-5</span>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

CSS


.sample {
    display: list-item;
}

実行結果list-item

span-1 span-2 span-3 span-4 span-5

HTML


<span class="sample span-1">span-1</span>
<span class="sample span-2">span-2</span>
<span class="sample span-3">span-3</span>
<span class="sample span-4">span-4</span>
<span class="sample span-5">span-5</span>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    margin:           5px;            /* 外側の余白 */
    padding:          5px;            /* 内側の余白 */
}

CSS


.sample {
    display: list-item;
}

.span-2 { height: 4rem; }
.span-4 { height: 5rem; }

実行結果heightは有効

span-1 span-2 span-3 span-4 span-5

display: list-itemの場合、リスト(<li>要素)と同じ扱いになるのでlist-style-type/list-style-image/list-style-positionなどのCSSプロパティも使えます。

display: none

visibility: hiddenとの違い

注意 : 隠せません

display: inline

display: block

display: inline-block

使い方の指針

inlineとblock

inline-block

none

display: list-item

`display: none`

`visibility: hidden`との違い

`display: inline`

`display: block`

`display: inline-block`

`inline`と`block`

`inline-block`

`none`

`display: list-item`