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

displayプロパティ

 displayプロパティは、flex値grid値によってタグエレメントの表示位置や表示の並び、インラインエレメントかブロックエレメントかを指定するプロパティです。

grid値によってレイアウトを作成
display: grid;
grid-template-columns: 400 400 400;
grid-template-rows: 300 100 400 300;
grid-template-areas: "header header header" "nav nav nav" "contents contents contents" "footer footer footer";
インラインエレメントに指定
display: inline;

 floatプロパティがありますが、表示方法がブラウザ任せのところが多くて曖昧ですので、全体のレイアウトを設定するには注意が必要です。

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

 displayプロパティを利用する上で、タグエレメントのデフォルト設定において改行が入るか入らないかや、paddingmarginプロパティによって想定より大きさが異なることがあることを知っておいた方がよいでしょう。

 現在の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エレメントが非表示になります。
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エレメントによる