CSSディスプレイ（显示）

display属性は、要素が生成するボックスのタイプを指定します。通常、displayに対応する値にはblock、none、inlineの3つの値が使用されます。

CSS表示属性

CSS規格では、すべての要素のデフォルトの表示値が定義されています。例えば、<div>要素はブロックで表示され、<span>要素はインラインで表示されます。

デフォルトの表示値の変更

要素のデフォルトの表示値は、display属性の重要な意味を持っています。例えば、インラインレベルの要素をブロックレベルの要素に変更したり、ブロックレベルの要素をインラインレベルの要素に変更したりすることができます。

以下の部分では、最もよく使われるCSSの表示値について説明します。

ブロック表示（Block）

display属性のblock値は、要素の行動を以下のように強制しますブロック要素、例えば<div>または<p>要素。以下の例のスタイルルールは、<span>および <a>要素がブロック要素として表示される：

span　{
　　　　display:　block;
}
a　{
　　　　display:　block;
}

内联表示（inline）

display属性のinline値は、要素の行動を以下のようにしますinline-レベル要素と同じように、例えば<span>または<a>要素。以下の例のスタイルルールは、<p>および <li>要素が内联レベル要素として表示される：

p　{
　　　　display:　inline;
}
ul　li　{
　　　　display:　inline;
}

内联ブロック（inline-block)

display属性のinline-block値は要素がフレームを生成し、そのフレームは周囲のコンテンツとともにフローします、つまり、隣接するコンテンツと同じ行に配置されます。以下のスタイルルールは、<div>および <span>要素が内联ブロックとして表示される：

div　{
　　　　display:　inline-block;
}
span　{
　　　　display:　inline-block;
}

表示しない（none）

display属性の値がnoneの場合、要素がフレームを生成せず、ページ上に表示されません。子要素もフレームを生成せず、その表示属性が非にも設定されている場合でもです。表示されるドキュメントは、その要素がドキュメントツリーに存在しないように見えます。

h1　{
　　　　display:　none;
}
p　{
　　　　display:　none;
}