Display

要素を表示する時の形式を指定します。
blockやnoneで、要素自体をなくしたり表示させたりする、折りたたみメニュー（アウトラインメニュー）などに利用しています。

●関連プロパティ

VISIBILITY

{ display : block | inline | list-item | none }

ブロック要素に変更

要素内容をブロック要素に変更します。<DIV>と同じ効果です。
サンプルは、オレンジ色のテキスト部分に、タグに「BLOCK」を指定したため、オレンジ色の部分のみブロックされ改行されます。

{ display : block }

Display PropertyDisplay Block

Display Property Display Block

インライン要素に変更

ブロック要素をインライン要素に変更します。
サンプルは、<LI>要素に「INLINE」を指定した場合、改行されずに1行で表示されます。

{ display : inline }

<ul>
<li style="display: inline; font-size: 14pt; font-family: Arial; color: rgb(255,102,0);">1.Display Inline</li>
<li style="display: inline; font-size: 14pt; font-family: Arial; color: rgb(255,102,0);">2.Display inline</li>
<ul>

1.Display inline
2.Display inline

リスト表示で指定

要素内容をリストで表示するはずですが、表示できません。
サンプルのオレンジのテキストに、「LIST-ITEM」を指定しています。Internet Explorer 6では、表示しますが6以外のバージョンの場合、チェックが必要です。

{ display : list-item }

Display list Item

要素有無の指定

要素を消去したり、出現させたりします。「VISIBILITY」と違い、要素そのものがなくなります。
サンプルは、マウスがDisplay Noneをクリックすると文字が消えますが、通過すると表示します。要素がなくなるため、Display Propertyのテキストが上へ上がります。
多くの折りたたみメニューは、通常はdisplay : noneで、サブメニューを表示しない状態にしておき、マウスがクリックや触れた時、display : blockでサブメニュー表示させると言った具合で、このプロパティで作成されています。

{ display : none }

Display None

Display None

Display Property