Box - ボックス

display
要素の表示形式

unknown

displayプロパティは、任意の要素に対し、どの要素として扱うかを指定します。

• デフォルト値：inline
• 適用：全要素
• 継承：しない

block

span要素、a要素などのインライン要素をブロック要素として扱う場合に使用します。 ブロックレベル要素扱いにするとmarginプロパティ（ブロック外余白）など、ブロックレベル要素に指定可能なスタイルも指定できるようになります。

下記の例では、a要素にdisplay:blockを指定しています。

td要素内のa要素をブロックレベル要素扱いにすると、a要素で括った文字列や画像だけでなく、td要素全体をリンクとすることができるようになります。

<style type="text/css">
	.ablock, .noblock {
		width:400px; margin:1em 0; border-collapse:collapse;
	}
	.ablock td, .noblock td {
		padding:2px; border:1px solid silver;
	}
	.ablock a {
		display:block; /* ブロック要素扱い */
	}
	.ablock a, .noblock a { /* 通常時 */
		margin:1px 0; padding:2px; background-color:#ffffcc; color:orange;
	}
	.ablock a:hover, .noblock a:hover { /* マウスが乗った時 */
		background-color:orange; color:#fff;
	}
</style>

<table class="ablock">
	<caption>aタグのdisplay属性にblockを指定（ブロック要素扱い）</caption>
	<tr><td><a href="#">display:block</a></td></tr>
	<tr><td><a href="#">display:block</a></td></tr>
</table>

<table class="noblock">
	<caption>aタグにdisplay属性を指定しない場合（インライン要素扱い）</caption>
	<tr><td><a href="#">display:inline</a></td></tr>
	<tr><td><a href="#">display:inline</a></td></tr>
</table>

以下は、div要素に上と同じクラス（ablock）を指定し、div要素内のa要素をブロックレベル要素扱いしています。

<div class="ablock">
	<a href="#">display:block</a>
	<a href="#">display:block</a>
</div>

inline

p要素、div要素、li要素などのブロックレベル要素をインラインレベル要素として扱う場合に使用します。

下記の例では、li要素にdisplay:inlineを指定しています。 li要素をインライン要素扱いすることで、通常は縦方向に表示されるリストを横方向に表示することができます。 これはナビゲーションメニューなどでよく使われる方法です。

<style type="text/css">
	ul#s2 li { display:inline; }
	ul#s2 li a { background-color:orange; color:#fff; border:1px solid orange; text-decoration:none; padding:5px; }
	ul#s2 li a:hover { background-color:#fff; color:orange; border:1px solid orange; }
</style>

<ul id="s2">
	<li><a href="#">display:inline</a>
	<li><a href="#">display:inline</a>
	<li><a href="#">display:inline</a>
</ul>

list-item

要素をリストとして扱う場合に使用します。 下記の例の様に、a要素にlist-itemを指定すると、a要素がリストとして扱われるため、 リストマークなどのリストプロパティも指定可能になります。

<style type="text/css">
	div#s3 a {
		display:list-item;
		margin-left:20px;
		width:200px;
		list-style-type:square;
		text-decoration:none;
	}
	div#s3 a:hover {
		background-color:#ffffcc;
	}
</style>

<div id="s3">
	<a href="#">display:list-item</a>
	<a href="#">display:list-item</a>
</div>

table関連

要素をテーブルとして扱う場合に使用します。

<style type="text/css">
	div#dispT {
		display:table;
		border:1px solid #ccc;
		border-collapse:collapse;
	}
	div#dispT div.tcap {
		display:caption;
	}
	div#dispT div.colgroup {
		display:table-column-group;
	}
	div#dispT div.colgroup div {
		display:table-column;
	}
	div#dispT div.thead {
		display:table-header-group;
	}
	div#dispT div.tfoot {
		display:table-footer-group;
	}
	div#dispT div.tbody {
		display:tabke-row;
	}
	div#dispT div.thead ul,
	div#dispT div.tbody ul,
	div#dispT div.tfoot ul {
		display:table-row-group;
	}
	div#dispT div.thead li,
	div#dispT div.tbody li,
	div#dispT div.tfoot li {
		display:table-cell;
		border:1px solid #ccc;
		width:100px;
	}
</style>

<div id="dispT">
	<div class="tcap">≪表題≫</div>
	<div class="colgroup">
        <div span="1"></div><!-- 見出し -->
        <div span="3"></div><!-- データ -->
    </div>
    <div class="thead">
		<ul>
			<li>ヘッダ</li>
			<li>A列</li>
			<li>B列</li>
			<li>C列</li>
		</ul>
	</div>
	<div class="tfoot">
		<ul>
			<li>フッタ</li>
			<li>A列</li>
			<li>B列</li>
			<li>C列</li>
		</ul>
	</div>
	<div class="tbody">
		<ul>
			<li>行1</li>
			<li>item A-1</li>
			<li>item B-1</li>
			<li>item C-1</li>
		</ul>
		<ul>
			<li>行2</li>
			<li>item A-2</li>
			<li>item B-2</li>
			<li>item C-2</li>
		</ul>
	</div>
</div>