備忘録的プログラミングリファレンス

display プロパティ

 display プロパティは、エレメント内のレイアウトや、インラインエレメントかブロックエレメントかを指定するプロパティです。
 エレメントのレイアウトには、grid値やflex値を指定します。

display プロパティ
#element {
	display: flex;
}

display プロパティの値

 display プロパティは値によって機能が大きく異なる場合があります。
 ここでは簡単に、block, inline, inline-block, grid, flex のみの解説をします。他の値は値(Values)を参照してください。

 block, inline, inline-block はエレメントをブロックエレメントかインラインエレメントか、またはブロックエレメントとインラインエレメントの特徴をもつインラインブロックエレメントに指定します。
 grid, flex はエレメント内のレイアウト方法を指定します。

display:block;、display:inline;、 display:inline-block;

 block 値、inline 値、 inline-block 値は、エレメントをブロックエレメントやインラインエレメントに変更することができます。

display:block;、display:inline;

 例えば <span> エレメントをブロックエレメントに、 <p> をインラインエレメントに指定することができます。
 <span> エレメントは改行のある表示になり、<p> は改行のない表示になります。

display:block;、display:inline;
<style>
	<span>{
		display: block;
	}

	<p>{
		display: inline;
	}
</style>

<p>display の<span>インラインエレメント</span>、<span>ブロックエレメント</span>の指定による変化です。</p>
実行結果

display のインラインエレメントブロックエレメントの指定による変化です。

 この例はあまり意味がありませんが、CSS のプロパティによってブロックエレメントでなければ機能しない、またはインラインエレメントでなければならない場合があります。
 そのような場合に、display: block; や display: inline; を指定することでインラインエレメントをブロックエレメントへ、ブロックエレメントをインラインエレメントに変更し、他の CSS プロパティを機能させることができます。

display:inline-block;

 また、inline-block はインラインエレメントとブロックエレメントの特徴を合わせもつエレメントへの指定です。inline-block は改行がありませんが、幅や高さ、余白、位置を変えることができます。
 例えば以下のように <span> を inline-block に指定すると、表示はインラインエレメントのように改行がありませんが、幅や高さ、余白、位置を変えることができるようになります。

display:block;、display:inline;
<style>
	<span>{
		display: inline-block;
		width: 16em;
		height: 1.5em;
		border:1px dotted red;
	}

	<p>{
	}
</style>

<p>display の<span>インラインブロックエレメント</span>の指定による変化です。</p>
実行結果

display のインラインブロックエレメントの指定による変化です。

display:grid;

 grid 値は、包括するエレメントをレイアウトすることができます。flex もあるのですが、こちらは位置と大きさを指定します。
 レイアウトは固定することになるので、PC、タブレット、スマートフォンといったディスプレイの解像度ごとに指定する必要があります。
 もしくはレイアウトを固定してもよいエレメント内で使用します。

display:grid; によるレイアウト

 詳しくは、display:grid;を参照してください。

display:flex;

 display:flex;は、レスポンシブウェッブデザインに利用できるプロパティです。

 float プロパティがありますが、表示方法がブラウザ任せのところが多くて曖昧ですので、全体のレイアウトを設定するには注意が必要ですが、この flex 値を使ったほうがより簡易です。
 PC、タブレット、スマートフォンといったディスプレイの解像度によって横並びを調整したい場合に便利です。

flex値によってレイアウトを作成
display: flex;
justify-content: normal;
align-items: normal;
flex-wrap: nowrap;
flex-direction: row;

 詳しくは「display:flex;」を参照してください。

 display の値には、リストに関するエレメントを別のエレメントに変えたり、テーブルに関するエレメントを別のエレメントに変えることもできます。詳しくは値(Values)を参照してください。

 タグエレメントによってはブロックエレメントやインラインエレメントであっても、デフォルトで改行が入るか入らないかがあることを知っておいた方がよいでしょう。

 現在のHTMLでは、タグエレメントはブロックラインエレメントにもインラインエレメントにも変えられるためにその違いは重要ではなくなりました。それよりも、何に使われるタグエレメントか(フローコンテンツなど)の違いの方が重要になります。

構文(Syntax)

CSS

display: 以下のValuesを参照 ;

DOM ( JavaScript )

値の取得
String = object.style.display;
値の設定
object.style.display="以下のValuesを参照";

値(Values)

value概要
block/inline
inline設定されたエレメントは、<span>エレメントのように改行を持ちません。サイズに関するwidthやheightといったプロパティは効きません。paddingやmarginは左右だけ設定できます。
block設定されたエレメントは、<p>エレメントのように改行を持ちます。サイズ変更が可能です。
contentsコンテンツのみの領域でpadding、border、marginが省略されます。サイズ変更が可能です。
inline-blockinlineとblockの折衷したプロパティです。改行は入りません。widthやheightが設定できます。paddingとmarginが設定できます。text-alignとvertical-alignが設定できます。
list-itemタグエレメントをリストコンテナとして設定します。<li>エレメントに似た機能を持ちます。
run-inコンテキストに応じてinlineまたはblockとして表示します。
表示/継承/初期化
noneエレメントが非表示になります。表示に切り替えるには値を指定しません。object.style.display=""などとします。
inherit親のdisplay プロパティを継承します。
initialプロパティの値をデフォルト値にします。
flex/grid
flexタグエレメントをflexコンテナとして設定します。
gridタグエレメントをgridコンテナとして設定します。
inline-flex改行のないinline設定のフレックスコンテナです。
inline-grid改行のないinline設定のgridコンテナです。
table
inline-table改行のないinline設定のtable表示です。
tableタグエレメントをtableコンテナとして設定します。<table>エレメントに似た機能を持ちます。
table-captionタグエレメントをcaptionコンテナとして設定します。<caption>エレメントに似た機能を持ちます。
table-column-groupタグエレメントをcolgroupコンテナとして設定します。<colgroup>エレメントに似た機能を持ちます。
table-header-groupタグエレメントをtheadコンテナとして設定します。<thead>エレメントに似た機能を持ちます。
table-footer-groupタグエレメントをtfootコンテナとして設定します。<tfoot>エレメントに似た機能を持ちます。
table-row-groupタグエレメントをtbodyコンテナとして設定します。<tbody>エレメントに似た機能を持ちます。
table-cellタグエレメントをtdコンテナとして設定します。<td>エレメントに似た機能を持ちます。
table-columnタグエレメントをcolコンテナとして設定します。<col>エレメントに似た機能を持ちます。
table-rowタグエレメントをtrコンテナとして設定します。<tr>エレメントに似た機能を持ちます。

備考(Remarks)

Default valueエレメントによる
Inherited(継承)no
Animatableエレメントによる