CSS display プロパティ

CSSテーブル CSS max-width

display プロパティは、レイアウトの制御に使用される最も重要な CSS プロパティです。

display 属性

display 属性は、要素を表示するかどうか/表示方法を指定します。

すべての HTML 要素には、要素タイプに応じてデフォルトの表示値があります。 ほとんどの要素のデフォルトの 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 値をオーバーライドする

前述したように、すべての要素にはデフォルトの表示値があります。 ただし、これをオーバーライドすることはできます。

インライン要素をブロック要素に、またはその逆に変更すると、Web 標準に従いながらページを特定の方法で表示するのに役立ちます。

一般的な例は、水平メニュー用のインライン <li> 要素の生成です。

例

li {
  display: inline;
}

自分で試してみてください

注: 要素の表示属性を設定すると、要素の種類ではなく要素の表示方法のみが変更されます。 したがって、display: block; を含むインライン要素の内部に他のブロック要素を含めることはできません。

次の例では、<span> 要素をブロック要素として表示します。

例

span {
  display: block;
}

自分で試してみてください

次の例では、<a> 要素をブロック要素として表示します。

例

a {
  display: block;
}

自分で試してみてください

隠し要素 - display:none または visibility:hidden?

display:none

visibility:hidden

Reset

要素を非表示にするには、display 属性を none に設定します。 要素は非表示になり、ページは要素が存在しないかのように表示されます。

例

h1.hidden {
  display: none;
}

自分で試してみてください

visibility:hidden; も要素を非表示にすることができます。

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

例

h1.hidden {
  visibility: hidden;
}

自分で試してみてください

CSS Display/Visibility プロパティ

属性 説明
display は要素の表示方法を指定します。
visibility は、要素を表示するかどうかを指定します。
CSSテーブル CSS max-width