display 表示状態を指定

display:(値)
・要素の表示状態をを指定。全ての要素が対象で、継承しない。
(値)
　inline ･･･（初期値）ブロック要素でも強制改行されることなく、インライン形式で
　　　　　　　表示される。
　block ･･･前後に改行が入るブロック形式で表示される。
　list-item ･･･ラベル付きリスト要素として表示される。
　none ･･･非表示というより、その要素の領域自体が無くなる。
　　　(visibility:hiddenは、非表示になるが領域自体は存在する）

Sample

inlineのテスト
ブロック要素である

見出し文字H3

DIV要素

これはマーキーです

が改行されないで、同じ行に表示されました

（何故か水平線HRには効かなかった？？）。

また、本来なら改行されるP要素をinline指定し並べると、同じ行に表示できる。

blockのテスト
この行の中に、インライン要素であるSPAN要素とを入れると、ブロック要素として扱われ強制改行された。

list-itemのテスト
テスト１テスト２

Scriptプロパティ＜display＞

忍者のアニメを変更する

、ちなみに

Sample Source......................................................................>>>

<div style="width:450px;border:1px solid navy">
　<p style="display:inline"><b>inlineのテスト</b><br>ブロック要素である</p>
　<h3 style="display:inline">見出し文字H3</h3>
　<div style="display:inline;border:thin solid red">DIV要素</div>
　<marquee width="30%" height="20" direction="right"  style="display:inline";>
　　　　これはマーキーです</marquee>
　<p style="display:inline">が改行されないで、同じ行に表示されました</p>
　<p style="display:inline">（何故か水平線HRには効かなかった？？）。</p>
　<p style="display:inline">また、本来なら改行されるP要素をinline指定し並べると、
　　　　同じ行に表示できる。</p>
</div>

<p style="width:450px;border:1px solid navy"><b>blockのテスト</b><br>
　この行の中に、インライン要素である<span style="display:block">SPAN要素</span>
　と<img id="ninjya" src="../../images/anime/ninjya.gif"style="display:block">
　を入れると、ブロック要素として扱われ強制改行された。</p>

<p style="width:450px;border:1px solid navy;padding-left:15mm">
　　<b>list-itemのテスト</b><br>
　<span style="display:list-item">テスト１</span>
　<span style="display:list-item">テスト２</span>
</p>

<p class="kaisetu">忍者のアニメを変更する<br>
　<button onclick="ninjya.style.display='inline'">インライン表示する</button>
　<button onclick="ninjya.style.display='block'">ブロック表示する</button>
　<button onclick="ninjya.style.display='none'">隠す（none）</button><br>
　、ちなみに<button onclick="ninjya.style.display='list-item'">
　　　list-itemすると</button>
</p>