display プロパティ
display プロパティは、grid、flex といったエレメント内のレイアウトに関する指定や、インラインエレメントかブロックレベルエレメントかを指定できる CSS のプロパティです。
例えば display: flex; と指定すると以下のように子エレメントを横並び並べることができます。
エレメントのレイアウトを作成するには display プロパティに、grid 値や flex 値を指定します。
インラインエレメントやブロックレベルエレメントとは、改行があるか/ないかといった特徴をもつエレメントの表示に関する性質です。例えば以下のような HTML テキストにおいて <p> エレメントはブロックエレメントで <span> エレメントはインラインエレメントです。
この HTML テキストを表示すると以下のようになります。
<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> は改行のない表示になります。
この例はあまり意味がありませんが、CSS のプロパティによってはブロックエレメントでなければ機能しない、またはインラインエレメントでなければならないプロパティがあります。
そのような場合に、display: block; や display: inline; を指定することでインラインエレメントをブロックエレメントへ、ブロックエレメントをインラインエレメントに変更し、目的の CSS プロパティを機能させることができます。
さらに、以下の inline-block はインラインの特徴を持ちながらブロックレベルとして機能します。ブロックレベルしか機能しない CSS プロパティを反映することができます。
display:inline-block;
inline-block はインラインエレメントとブロックエレメントの特徴を合わせもつエレメントへの指定です。inline-block は改行がありませんが、幅や高さ、余白、位置を変えることができます。
例えば以下のように <span> を inline-block に指定すると、表示はインラインエレメントのように改行がありませんが、幅や高さ、余白、位置を変えることができるようになります。
このようにインラインとブロックレベルで機能する CSS プロパティを使用することができます。
display: grid;
grid 値は、包括するエレメントをレイアウトすることができます。こちらは位置と大きさを指定します。
レイアウトは固定することになるので、PC、タブレット、スマートフォンといったディスプレイの解像度ごとに指定する必要があります。
もしくはレイアウトを固定してもよいエレメント内で使用します。
詳しくは、display:grid;
を参照してください。
display: flex;
display: flex;は、レスポンシブウェッブデザインに利用できるプロパティです。
float プロパティがありますが、表示方法がブラウザ任せのところが多くて曖昧ですので、全体のレイアウトを設定するには注意が必要ですが、この flex 値を使ったほうがより簡易です。
PC、タブレット、スマートフォンといったディスプレイの解像度によって横並びを調整したい場合に便利です。
詳しくは「display:flex;」を参照してください。
display の値には、リストに関するエレメントを別のエレメントに変えたり、テーブルに関するエレメントを別のエレメントに変えることもできます。詳しくは値(Values)
を参照してください。
タグエレメントによってはブロックエレメントであってもデフォルトで改行は入らない、インラインエレメントであっても改行が入るかことがあることを知っておいた方がよいでしょう。
現在のHTMLでは、タグエレメントはブロックレベルエレメントにもインラインエレメントにも変えられるためにその違いは重要ではなくなりました。それよりも、何に使われるタグエレメントか(フローコンテンツなど)の違いの方が重要になります。
構文(Syntax)
CSS
DOM ( JavaScript )
値(Values)
value | 概要 |
---|---|
block/inline | |
inline | 設定されたエレメントは、<span>エレメントのように改行を持ちません。サイズに関するwidthやheightといったプロパティは効きません。paddingやmarginは左右だけ設定できます。 |
block | 設定されたエレメントは、<p>エレメントのように改行を持ちます。サイズ変更が可能です。 |
contents | コンテンツのみの領域でpadding、border、marginが省略されます。サイズ変更が可能です。 |
inline-block | inlineと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 | エレメントによる |
関連する CSS プロパティ
以下のような関連するプロパティがあります。
align-content | フレックスラインの垂直方向の配置 |
align-items | 初期の配置位置 |
align-self | フレックスアイテムの配置位置 |
justify-content | 主軸方向の並びを指定 |
flex-wrap | 横並びにしたフレックスアイテムの折り返し |
flex-basis | フレックスアイテムの基本となる幅 |
flex-direction | フレックスアイテムの縦または横の並び |
flex-flow | flex-direction、flex-wrapを一括指定 |