CSS : display (ディスプレイ) の解説 | 独学 Webプログラミング!

displayとは

display: 読み: ディスプレイ
意味: 表示

目次に戻る

displayプロパティの概要

このプロパティは要素のボックスの種類を変更することができます。

ボックスは指定したキーワードにより、インラインボックス、ブロックボックス、インラインレベルのブロックスボックス、テーブルアイテム、フレックスコンテナ、などを形成します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{display: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルでは、span要素とdiv要素を使用します。

span 要素は記述コンテンツの汎用的なインラインコンテナーです。 This element is a generic inline container.

div 要素は各コンテンツをひとまとめにする際に使う汎用的なブロックコンテナーです。 This element is a generic block container.

目次に戻る

初期値: inline

初期値のinlineは要素をインラインのボックスとして表示します。コンテンツは横方向に1行のラインとして扱われます。

このサンプルではブロックコンテナーのdiv要素を使用しています。

This element is a generic block container. ↓ The div element is displayed as an inline box like this.

div{
	display: inline;
	margin: 3px;
}

目次に戻る

キーワード値: block

blockキーワードは、ブロックレベルのボックスとして表示します。コンテンツ領域は、一つのブロックとして認識され一般的なブラウザでは要素の前後に改行が入ります。

このサンプルはインラインコンテナーのspan要素を使用しています。

This element is a generic inline container. ↓ The block keyword is displayed as a box of block elements.

span{
	display: block;
	margin: 3px;
}

目次に戻る

キーワード値: inline-block

inline-blockキーワードは、要素をインラインレベルのブロックボックスとして表示します。これはブロックボックスを改行しないで横並びにしたい時などにインラインの特性を生かした表示方法ができます。

このサンプルではdiv要素を使用しています。

block container block container ↓ inline-block inline-block

div{
	display: inline-block;
	margin: 3px;
}

目次に戻る

キーワード値: flow-root

flow-rootキーワードは新たなブロック要素ボックスとして表示されます。下記のように後に続くコンテンツは整形ルートがある場所に表示されます。

このサンプルはspan要素を使用しています。

flow-root flow-root

div{
	display: flow-root;
	margin: 3px;
}

目次に戻る

キーワード値: table

tableキーワードは、テーブルを構成するためのブロックレベルボックスを定義しHTMLの table 要素の表と同じように動作します。

テーブルのレイアウトを構成するには、親要素に対してtableキーワードを設定し、子要素に対して、table-cell等のキーワードを設定します。

このサンプルでは、あえてdiv要素のみ使用しています。実際に、このような使い方はプログラムで複雑な処理してから大量のデータを書き出すことを想定して設計している場合には有効かもしれません。

キャプション見出し見出し見出しデータデータデータデータデータデータフッター

<style>
	.clsTable{
		display: table;
		counter-reset: Numbers;
		width: 100%;
	}
	.clsCaption{
		display: table-caption;
		background-color: ##cornflowerblue;
		text-align: center;
		width: 100%;
	}
	.clsTHead{
		display: table-header-group;
	}
	.clsTBody{
		display: table-row-group;
	}
	.clsTFoot{
		display: table-footer-group;
	}
	.clsTr{
		display: table-row;
	}
	.clsTh{
		display: table-cell;
		background-color: ##lightskyblue;
		border: thin solid ##gray;
		font-weight: bold;
		text-align: center;
		width: 33%;
	}
	.clsTd{
		display: table-cell;
		background-color: ##powderblue;
		border: thin solid ##gray;
		counter-increment: Numbers;
		text-align: center;	
	}
	.clsTd::after{
		content: counter(Numbers);
	}
	.clsTColumn{
		display: table-column;
	}
	.clsTFoot{
		border: none;
		text-decoration: underline;
	}
</style>

<body>
	<div class ="clsTable">
		<div class ="clsCaption">キャプション</div>
		<div class ="clsTHead">
			<div class ="clsTr">
				<div class ="clsTh">見出し</div>
				<div class ="clsTh">見出し</div>
				<div class ="clsTh">見出し</div>
			</div>	
		</div>
		<div class ="clsTBody">
			<div class ="clsTr">
				<div class ="clsTd">データ</div>
				<div class ="clsTd">データ</div>
				<div class ="clsTd">データ</div>
			</div>
			<div class ="clsTr">
				<div class ="clsTd">データ</div>
				<div class ="clsTd">データ</div>
				<div class ="clsTd">データ</div>
			</div>	
		</div>
		<div class ="clsTFoot">フッター</div>
	</div>
<body>

目次に戻る

キーワード値: flex

flexキーワードは、ブロック要素の動作をしますがフレックスボックスモデルのようにレイアウトします。このキーワードを指定すると親要素はフレックスボックスコンテナーになり、直接の子要素がフレックスボックスアイテムへと変わります。

フレックスボックスのレイアウトを適用するには、親要素に対してdisplay: flex;を設定します。

このセクションのサンプルでは親要素にdiv要素を使用し子要素にp要素とb要素を含んでいます。 divはコンテナーであり、pはブロック要素、bはインライン要素となります。

This element is a generic block container. This is a child element of the block. This is an inline child element. This is a child element of the block. This is an inline child element.

上記のサンプルは親要素にdisplayを設定していません。この場合、子要素は純粋に要素が持つボックスのスタイルで表示されます。

↓

上記のサンプルは親要素にdisplay: flex;を設定しました。この場合は子要素はフレックスボックスアイテムとして表示されます。

The flex keyword can be laid out like a flex box model. This is a child element of the block. This is an inline child element. This is a child element of the block. This is an inline child element.

<style>
	div{
		display: flex;
		justify-content: space-around;
		padding: 5px;
		border: 2px solid ##darkgreen;
		background-color: ##lightgreen;
	}
	div p{
		margin: 3px;
		padding: 3px;
		border: thin solid ##darkgreen;
		background-color: rgb(190, 255, 220);
	}
	div b{
		margin: 3px;
		padding: 3px;
		border: thin solid ##blue;
		background-color: rgb(200, 240, 255);
	}
</style>

<body>
	<div>
		The flex keyword can be laid out like a flex box model.
		<p>This is a child element of the block.</p>
		<b>This is an inline child element.</b>
		<p>This is a child element of the block.</p>
		<b>This is an inline child element.</b>
	</div>
</body>

目次に戻る

キーワード値: grid

gridキーワードは、ブロック要素の動作をしますがグリッドモデルのようにレイアウトができます。このキーワードを親要素に指定すると、内包したすべての直接の子要素がグリッドアイテムへと変わります。

This element is a generic block container. This is a child element of the block. This is an inline child element. This is a child element of the block. This is an inline child element.

上記のサンプルは親要素にdisplayを設定していません。この場合、子要素は純粋に要素が持つボックスのスタイルで表示されます。

↓

下記のサンプルは親要素にdisplay: grid;を設定しました。この場合は子要素はグリッドアイテムとして表示されます。

The grid keyword can be laid out like a grid box model. This is a child element of the block. This is an inline child element. This is a child element of the block. This is an inline child element.

<style>
	div{
		display: grid;
		justify-content: space-around;
		padding: 5px;
		border: 2px solid ##darkgreen;
		background-color: ##lightgreen;
	}
	div p{
		margin: 3px;
		padding: 3px;
		border: thin solid ##darkgreen;
		background-color: rgb(190, 255, 220);
	}
	div b{
		margin: 3px;
		padding: 3px;
		border: thin solid ##blue;
		background-color: rgb(200, 240, 255);
	}
</style>

<body>
	<div>
		The grid keyword can be laid out like a grid box model.
		<p>This is a child element of the block.</p>
		<b>This is an inline child element.</b>
		<p>This is a child element of the block.</p>
		<b>This is an inline child element.</b>
	</div>
</body>

目次に戻る

キーワード値: list-item

list-itemキーワードはリスト項目のように表示されます。 list-styleプロパティで、 list-style-typeとlist-style-positionを併用することができます。

サンプルでは要素にマウスオーバーした時に list-style プロバティのoutsideキーワードを指定しています。また、要素をアクティブ化した時にsquareキーワードを指定しています。

List items List items List items

<style>
	.classList{
		display: list-item;
		border: 2px solid ##darkgreen;
		background-color: ##lightgreen;
		margin: 3px;
		padding: 5px;
		width: fit-content;
		list-style-position: inside;
		list-style-type: circle;
	}
	.clsList:hover{
		list-style-position: outside;
	}
	.clsList:active{
		list-style-type: square;
	}
</style>

<body>
	<div class ="clsList">List items</div>
	<div class ="clsList">List items</div>
	<div class ="clsList">List items</div>
</body>

目次に戻る

キーワード値: none

noneキーワードは要素を視覚的に隠したい場合に使用します。

このサンプルはspan要素を使用しています。

以下にspan要素が記述してありますが、noneキーワードで隠されています。 none none

span{
	display: none;
	margin: 3px;
}

目次に戻る

キーワード値: contents

contentsキーワードは要素をコンテンツとして表現します。

要素をコンテンツとして表現すためにはCSSプロパティを削除して純粋なテキストノードに見せかける必要があります。このため、以前からCSSで設定していた要素のスタイル設定は全て削除されますが、孫要素までは効果は及びません。

このサンプルでは二つ目のspan要素にstyle属性を使ってdisplay:contentsを設定しています。二つのspan要素で違いを見て下さい。

<style>
	span{
		background-color: ##lightskyblue;
		border: 2px solid ##blue;
		margin: 3px;
		padding: 5px;
		width: fit-content;
	}
</style>

innerText 1 innerText 2

<body>
	< span>innerText <b style="color: red;">1</b></span>
	< span style="display:contents;">innerText <b style="color: blue;">2</b></span>
</body>

目次に戻る

グローバル値

displayプロパティに対してのグローバルキーワードは以下の3つです。ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

inheritは親要素の値の継承を促します。
initialは値を初期値のinlineに戻します。
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{display: グローバル値;}

目次に戻る

補足説明

すべての要素に適用可能
親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。コードの部分をクリックすると、サンプルにCSSが反映されます。

display: inline;

display: block

display: flow-root;

display: inline-block;

display: table;

display: flex;

display: grid;

display: list-item;

display: none;

display: contents;

サンプル: ブロック要素サンプル: インライン要素

目次に戻る

Title

要素のボックスの種類を指定する

目次 (INDEX)

displayとは

displayプロパティの概要

構文

実機サンプルとサンプルコード

初期値: inline

キーワード値: block

キーワード値: inline-block

キーワード値: flow-root

キーワード値: table

キーワード値: flex

キーワード値: grid

キーワード値: list-item

キーワード値: none

キーワード値: contents

グローバル値

補足説明

まとめ