Loose-Info.com

Last Update 2019/12/25


TOP - CSS1(Cascading Style Sheets, level 1) - display

要素のタイプを変更します。
ブラウザによって動作の違いが確認されています。

設定値
block : ブロック要素 inline : インライン要素 list-item : リストアイテム要素 none : 表示しない

(例)
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- SPAN.test1 {display: block; color: red} SPAN.test2 {color: red} SPAN.test3 {display: none} DIV.test1 {display: inline; color: blue} DIV.test2 {color: blue} --> </STYLE> </HEAD> <BODY> <P>ここの<SPAN class="test1">SPANタグ</SPAN>はブロック要素</P> <HR> <P>ここの<SPAN class="test2">SPANタグ</SPAN>はインライン要素</P> <HR> <P>ここの[<SPAN class="test3">SPANタグ</SPAN>]は表示されません</P> <HR> <P>ここの<DIV class="test1">DIVタグ</DIV>はインライン要素(結果が中途半端)</P> <HR> <P>ここの<DIV class="test2">DIVタグ</DIV>はブロック要素</P> </BODY> </HTML>