CSS レイアウト - display 属性

display 属性はレイアウトを制御する最も重要な CSS 属性です。

display 属性

display 属性が要素の表示を決定するかどうかまたはどのように表示するかを規定します。

すべての HTML 要素にはデフォルトの display 値があり、それが要素のタイプによって決定されます。ほとんどの要素のデフォルトの display 値は block または inline。

パネルを表示するためにクリックしてください

このパネルには、デフォルトで非表示である <div> 要素が含まれています。（display: none)

これはCSSでスタイル設定され、JavaScriptを使用して表示されます。（変更するには、 display: block)

ブロック要素（block element）

ブロック要素は常に新しい行から始まり、可能な限り左と右に広がる全幅を占めます。

この<div>要素はブロック要素です。

ブロック要素の例：

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

行内要素（inline element）

内联要素は新しい行から始まりず、必要な幅のみを占めます。

これは段落内の行内<span>要素。

行内要素の例：

  • <span>
  • <a>
  • <img>

Display: none;

display: none; JavaScriptと一緒に使用され、要素を非表示にしたり表示したりするために、要素を削除したり再作成したりする必要がありません。この目標を実現する方法について知りたい場合は、このページの最後の例を確認してください。

デフォルトでは、<script> 要素は display: none;。

デフォルトのDisplay値を上書き

先ほど述べたように、各要素にはデフォルトのdisplay値があります。しかし、それを上書きすることができます。

行内要素をブロック要素に、または逆にブロック要素を行内要素に変更することで、ページを特定の方法で表示しつつWeb標準に従うことができます。

水平メニューを実現するために、行内の <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;
}

自分で試してみる

さらに多くの例

display: none; と visibility: hidden; の違い
この例では、display: none; と visibility: hidden; の違いを示します。
CSS と JavaScript を組み合わせてコンテンツを表示する
この例では、クリック時に要素を表示する方法を CSS と JavaScript で説明します。

CSS Display/Visibility 属性

属性 説明
display 要素の表示方法を指定します。
visibility 指定された要素が表示されるべきかどうかを指定します。