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

display プロパティ

 display プロパティは、gridflex といったエレメント内のレイアウトに関する指定や、インラインエレメントかブロックレベルエレメントかを指定できる CSS のプロパティです。

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

 例えば display: flex; と指定すると以下のように子エレメントを横並び並べることができます。

1
2
3

 エレメントのレイアウトを作成するには display プロパティに、grid 値や flex 値を指定します。

 インラインエレメントやブロックレベルエレメントとは、改行があるか/ないかといった特徴をもつエレメントの表示に関する性質です。例えば以下のような HTML テキストにおいて <p> エレメントはブロックエレメントで <span> エレメントはインラインエレメントです。

<p style="border:1px dotted gray;">P タグエレメントはブロックエレメントです。そのため改行があります。<span>SPAN エレメント</span>は改行がなく、ブロックエレメント内に<span>複数個</span>を設定することができます。</p>

 この HTML テキストを表示すると以下のようになります。

P タグエレメントはブロックエレメントです。そのため改行があります。SPAN エレメントは改行がなく、ブロックエレメント内に複数個を設定することができます。

  <p> エレメントや <span> エレメントのブロック、インラインエレメントの性質を display プロパティで変更することができます。

 詳しくは以下のdisplay プロパティの値を参照してください。

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 プロパティを機能させることができます。

 さらに、以下の inline-block はインラインの特徴を持ちながらブロックレベルとして機能します。ブロックレベルしか機能しない 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 のインラインブロックエレメントの指定による変化です。

 このようにインラインとブロックレベルで機能する CSS プロパティを使用することができます。

display: grid;

 grid 値は、包括するエレメントをレイアウトすることができます。こちらは位置と大きさを指定します。
 レイアウトは固定することになるので、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エレメントによる