CSS レイアウト - display プロパティ

display プロパティは、レイアウトを制御するための最も重要な CSS プロパティです。

display プロパティ

display プロパティは、要素を表示するかどうか、表示する場合はどのように表示するかを指定します。

すべての HTML 要素は、要素の種類に応じて、デフォルトの display 値を持っています。 ほとんどの要素におけるデフォルトの display 値は、block または inline です。

クリックするとパネルを表示します

ブロックレベル要素

ブロックレベル要素は、常に新しい行で始まり、可能な限り幅全体に広がります（左右に引伸ばせるだけ引伸ばされます）。

ブロックレベル要素の例：

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

インライン要素

インライン要素は、新しい行では開始せず、必要なだけの幅しかとりません。

This is an inline <span> element inside a paragraph.

インライン要素の例：

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

Display: none;

display: none; は、一般的に、JavaScript を使用して要素を削除や再作成せずに、隠したり表示したり するために使われます。これを実現する方法を知りたければ、このページの最後の例を見てください。

<script> 要素は、デフォルトとして display: none; を使用します。

デフォルト Display 値のオーバーライド

前述の通り、すべての要素はデフォルトの display 値を持っています。しかし、これをオーバーライドすることができます。

インライン要素をブロック要素に、またはその逆に変更することは、 ページの外観を指定の方法で変更するのを便利にできると共に、web 標準に従うものです。

一般的な例としては、インライン <li> から横向きのメニューを作ることです：

	注: 要素の display プロパティの設定は、それがどのような種類の要素であるかではなく、 要素をどのように表示するかだけを変更します。 従って、display:block に設定されたインライン要素は、その内部にブロック要素を持つことができません。

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

要素の非表示 - display:none または visibility:hidden

display プロパティを none に設定することで、要素を非表示にすることができます。 要素は非表示になり、要素はそこに無かったようにページが表示されます：

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

しかし、要素は表示した場合と同じスペースを取ります。要素は見えませんが、レイアウトには影響が残ります：

その他の例

display: none; 対 visibility: hidden;
この例は、display: none; 対 visibility: hidden; のデモです。

コンテンツを表示するため JavaScript と共に CSS を使う
この例は、クリック時にコンテンツを表示するため JavaScript と共に CSS を使用する方法のデモです。

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯  Exercise 4 ❯

CSS Display/Visibility プロパティ