display

displayは、ボックスの種類を指定するスタイルです。

解説

HTMLの各タグにはインライン要素やブロック要素といった分類がされていて、
タグによって表示方法が決まっています。

例えば、ブロック要素にはdivタグやpタグなどがありますが、ブロック要素の前後は改行して表示されるというルールがあります。
インライン要素にはaタグやspanタグがありますが、インライン要素の前後は改行されません。

displayスタイルを指定すると、こうしたルールを変更して表示形式を変えることができます。

構文

構文は以下になります。

値

displayには以下の値が指定できます。

太字の値は初期値です。

サンプル

要素をインライン要素として表示する

.sample01 {
  display:inline;
}

<div class="sample01">あいうえおかきくけこ</div>

要素をブロック要素として表示する

.sample01 {
  display:block;
}

<div class="sample01">あいうえおかきくけこ</div>

要素を表示しない

.sample01 {
  display:none;
}

<div class="sample01">あいうえおかきくけこ</div>

表示領域も詰まります

備考

• inlineがデフォルト値です。

Tweet