CSSのdisplayの使い方を完全解説！block・inlineの違いについても解説します。
displayプロパティは、レイアウトを制御するための最も重要なCSSプロパティです。
displayプロパティ
displayプロパティは、要素を表示するかどうか/どのように表示するかを指定します。
すべてのHTML要素には、要素のタイプに応じたデフォルトのdisplay値があります。ほとんどの要素のデフォルトのdisplay値はblockまたはinlineです。
クリックしてパネルを表示
このパネルには、デフォルトで非表示になっている<div>要素が含まれています（display: none）。
CSSでスタイルを設定し、JavaScriptを使用して表示します（display: block）。
ブロックレベルの要素
ブロックレベルの要素は常に新しい行から始まり、利用可能な全幅を占有します(可能な限り左右に伸びます)。
ブロックレベル要素の例:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
インライン要素
インライン要素は新しい行から開始せず、必要な幅しか占有しません。
これは、段落内のインライン要素です。
インライン要素の例
- <span>
- <a>
- <img>
display: none;
display: none;は、要素を削除したり再作成したりせずに要素を非表示および表示するために、JavaScriptで一般的に使用されます。これを実現する方法を知りたい場合は、このページの最後の例をご覧ください。
<script>要素はデフォルトとして、display: none;を使用します。
デフォルトのdisplay値を上書きする
前述のように、すべての要素にはデフォルトのdisplay値があります。ただし、これをオーバーライドできます。
インライン要素をブロック要素に、またはその逆に変更すると、ページを特定の方法で表示し、Web標準に準拠させるのに役立ちます。
一般的な例は、水平メニューのインライン<li>要素を作成することです。
ノート：要素の表示プロパティを設定すると、要素の表示方法のみが変更され、要素の種類は変更されません。つまり、display: block;を持つインライン要素です。内部に他のブロック要素を含めることはできません。
次の例では、<span>要素をブロック要素として表示します。
次の例では、<a>要素をブロック要素として表示します。
要素を非表示にする - display:noneそれともvisibility:hidden?
display:none
visibility:hidden
リセット
要素を非表示にするには、displayプロパティをnoneに設定します。要素は非表示になり、要素が存在しないかのようにページが表示されます。
visibility:hidden;もまた、要素を非表示にします。
ただし、要素は以前と同じスペースを占有します。要素は非表示になりますが、レイアウトには影響します。
その他の例
display: none; および visibility: hidden;
この例は、display: none;とvisibility: hidden;の違いを示しています。
CSSとJavaScriptを併用してコンテンツを表示する
この例では、CSSとJavaScriptを使用してクリック時に要素を表示する方法を示します。
CSS display / visibilityプロパティ
|
プロパティ |
説明 |
|---|---|
| display | 要素の表示方法を指定します |
| visibility | 要素を表示するかどうかを指定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。