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

visibility:hidden

displayプロパティをnoneに設定することで要素を非表示にすることができます。要素は非表示にされ、ページはその要素が存在しないかのように表示されます:


h1.hidden {
  display: none;
}

visibility:hidden;も要素を非表示にします。

ただし、要素は以前と同じスペースを取ります。要素は非表示にされますが、レイアウトには影響します:


h1.hidden {
  visibility: hidden;
}