CSS レイアウト – displayプロパティ
レイアウトを制御するために最も重要なCSSプロパティは、displayプロパティです。
目次
displayプロパティ
displayプロパティは、要素がウェブページ上でどのように表示されるかを指定するために使用されます。
すべてのHTML要素には、それがどのタイプの要素であるかに応じてデフォルトの表示値があります。ほとんどの要素のデフォルト表示値は、blockまたはinlineです。
displayプロパティは、HTML要素のデフォルトの表示動作を変更するために使用されます。
ブロックレベル要素
ブロックレベル要素は常に新しい行で始まり、利用可能な全幅を取ります（左右に伸びます）。
<div>要素はブロックレベル要素です。
ブロックレベル要素の例：
<div><h1>–<h6><p><form><header><footer><section>
インライン要素
インライン要素は新しい行で始まらず、必要な幅だけを取ります。
これは段落内のインライン<span>要素です。
インライン要素の例：
<span><a><img>
displayプロパティの値
displayプロパティには多くの値があります：
| 値 | 説明 |
|---|---|
| inline | インライン要素として要素を表示します |
| block | ブロック要素として要素を表示します |
| contents | コンテナを消去し、子要素をDOMの次のレベルの親要素として表示します |
| flex | ブロックレベルのフレックスコンテナとして要素を表示します |
| grid | ブロックレベルのグリッドコンテナとして要素を表示します |
| inline-block | インラインレベルのブロックコンテナとして要素を表示します。要素自体はインライン要素としてフォーマットされますが、高さと幅の値を適用できます |
| inline-flex | インラインレベルのフレックスコンテナとして要素を表示します |
| inline-grid | インラインレベルのグリッドコンテナとして要素を表示します |
| inline-table | インラインレベルのテーブルとして要素を表示します |
| list-item | 要素を<li>要素のように振る舞わせます |
| run-in | コンテキストに応じて要素をブロックまたはインラインとして表示します |
| table | 要素を<table>要素のように振る舞わせます |
| table-caption | 要素を<caption>要素のように振る舞わせます |
| table-column-group | 要素を<colgroup>要素のように振る舞わせます |
| table-header-group | 要素を<thead>要素のように振る舞わせます |
| table-footer-group | 要素を<tfoot>要素のように振る舞わせます |
| table-row-group | 要素を<tbody>要素のように振る舞わせます |
| table-cell | 要素を<td>要素のように振る舞わせます |
| table-column | 要素を<col>要素のように振る舞わせます |
| table-row | 要素を<tr>要素のように振る舞わせます |
| none | 要素を完全に削除します |
| initial | このプロパティをその初期値に設定します |
| inherit | このプロパティを親要素から継承します |
Display: none;
display: none;は、JavaScriptと共に要素を非表示にしたり表示したりするために一般的に使用されます。これにより、要素が削除および再作成されることなく非表示にできます。
<script>要素はデフォルトでdisplay: none;を使用します。
パネルを表示するにはクリックしてください
デフォルトの表示値をオーバーライドする
先述したように、すべての要素にはデフォルトの表示値がありますが、これをオーバーライドすることができます。
インライン要素をブロック要素に変更したり、その逆を行ったりすることは、ページを特定の方法で表示するのに便利ですが、ウェブ標準には従います。
水平メニューのためにインライン<li>要素を作成する一般的な例：
li {
display: inline;
}
注意：要素のdisplayプロパティを設定すると、要素の表示方法が変更されるだけで、要素の種類は変更されません。したがって、display: block;を持つインライン要素の内部に他のブロック要素を配置することは許されません。
以下の例は、<span>要素をブロック要素として表示します：
span {
display: block;
}
以下の例は、<a>要素をブロック要素として表示します：
a {
display: block;
}
display:none
visibility:hidden
displayプロパティをnoneに設定することで要素を非表示にすることができます。要素は非表示にされ、ページはその要素が存在しないかのように表示されます：
h1.hidden {
display: none;
}
visibility:hidden;も要素を非表示にします。
ただし、要素は以前と同じスペースを取ります。要素は非表示にされますが、レイアウトには影響します：
h1.hidden {
visibility: hidden;
}