displayのレンダリング

 
ビジュアル
ホーム > CSS2 Note > display > displayのレンダリング

inline (インライン要素)

div.eg1 {display:inline; border:solid 2px #9cf; background:#eee;}
div.eg2 {display:inline; border:solid 2px #cc6; background:#eee;}
div.eg3 {display:inline; border:solid 2px #9c6; background:#eee;}
div.eg4 {display:inline; border:solid 2px #f66; background:#eee;}
 

block (ブロック要素)

span.eg1 {display:block; border:solid 2px #9cf; background:#eee;}
span.eg2 {display:block; border:solid 2px #cc6; background:#eee;}
span.eg3 {display:block; border:solid 2px #9c6; background:#eee;}
span.eg4 {display:block; border:solid 2px #f66; background:#eee;}
 

list-item (リストアイテム: li要素と同じ働きをする)

<style type="text/css"><!--
span.eg1 {display:list-item; border:solid 6px #9cf; background:#eee;}
span.eg2 {display:list-item; border:solid 6px #cc6; background:#eee;}
span.eg3 {display:list-item; border:solid 6px #9c6; background:#eee;}
span.eg4 {display:list-item; border:solid 6px #f66; background:#eee;}
--></style>

<ol type="I">
<span class="eg1">span.eg1 {display:list-item; border:solid 6px #9cf; background:#eee;}</span>
<span class="eg2">span.eg2 {display:list-item; border:solid 6px #cc6; background:#eee;}</span>
<span class="eg3">span.eg3 {display:list-item; border:solid 6px #9c6; background:#eee;}</span>
<span class="eg4">span.eg4 {display:list-item; border:solid 6px #f66; background:#eee;}</span>
</ol>
 

run-in (ランイン)

run-in (ランイン)　 Opera9のサンプル画像
<style type="text/css"><!--
h3 {display:run-in; border:solid 6px #9cf;}
--></style>

<h3>run-in head</h3>
<p>こんにちは　こんにちは　こんにちは　こんにちは</p>
-ie7 -ff3はともに無視される。ie8- o4- sf1- gc1-は対応。
 

compact (コンパクト表示)

<style type="text/css"><!--
dt {display:compact; border:solid 6px #9cf;}
dd {margin-left:8em; border:solid 6px #9c6;}
--></style>

<dl>
  <dt>用語</dt>
  <dd><p>用語の説明です。</p></dd>
  <dt>マージンより幅のある用語</dt>
  <dd><p>用語の説明です。</p></dd>
</dl>
-ie8 -ff3 sf4 -gc2ともに無視される。o4-9 sf1-3は不完全。
 

marker (リストの点や数字)

marker (リストの点や数字)　 Opera9のサンプル画像
<style type="text/css"><!--
div.mc:before {
  display:marker;
  content:counter(mycounter, lower-roman) ".";
  counter-increment:mycounter;
}
--></style>

<div class="mc"> おはよう</div>
<div class="mc"> こんにちは</div>
<div class="mc"> こんばんは</div>
CSS2では下記のように表示されるべきとされています。

  i. おはよう
 ii. こんにちは
iii. こんばんは
-ie7は無視される。ie8- -ff3 -sf4 -gc2は不完全。o9は対応。
 

table (テーブル: 表)

table (テーブル: 表)　 Opera9のサンプル画像
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>display table</title>
<style type="text/css"><!--
.table  {display:table; border-spacing:1px; border:solid 1px #999;}
.caption{display:table-caption; text-align:center;}
.colgroup1{display:table-column-group; width:100px;}
.colgroup2{display:table-column-group; width:100px;}
.col1   {display:table-column; width:80px;}
.col2   {display:table-column; width:60px;}
.thead  {display:table-header-group;}
.tfoot  {display:table-footer-group;}
.tbody  {display:table-row-group;}
.tr     {display:table-row; border:solid 1px #999; vertical-align:middle;}
.th     {display:table-cell; border:solid 1px #999; font-weight:bold; text-align:center;}
.td     {display:table-cell; border:solid 1px #999;}
--></style>
</head>

<body>

<span class="table">
<span class="caption">表題</span>
<span class="colgroup1"></span>
<span class="colgroup2">
  <span class="col1"></span>
  <span class="col2"></span>
</span>
<span class="thead">
<span class="tr"><span class="th">ヘッダ</span><span class="th">ヘッダ</span><span class="th">ヘッダ</span></span>
</span>
<span class="tfoot">
<span class="tr"><span class="td">フッタ</span><span class="td">フッタ</span><span class="td">フッタ</span></span>
</span>
<span class="tbody">
<span class="tr"><span class="td">データ</span><span class="td">データ</span><span class="td">データ</span></span>
<span class="tr"><span class="td">データ</span><span class="td">データ</span><span class="td">データ</span></span>
</span>
</span>

<span class="table">
<span class="caption">表題</span>
<span class="colgroup1"></span>
<span class="colgroup2">
  <span class="col1"></span>
  <span class="col2"></span>
</span>
<span class="thead">
<span class="tr"><span class="th">ヘッダ</span><span class="th">ヘッダ</span><span class="th">ヘッダ</span></span>
</span>
<span class="tfoot">
<span class="tr"><span class="td">フッタ</span><span class="td">フッタ</span><span class="td">フッタ</span></span>
</span>
<span class="tbody">
<span class="tr"><span class="td">データ</span><span class="td">データ</span><span class="td">データ</span></span>
<span class="tr"><span class="td">データ</span><span class="td">データ</span><span class="td">データ</span></span>
</span>
</span>

</body>
</html>
-ie7は未対応。ie8- ff1- o4- sf1- gc1-は対応。
 

inline-table (インラインのテーブル)

inline-table (インラインのテーブル)　 Opera9のサンプル画像
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>display inline-table</title>
<style type="text/css"><!--
.intable{display:inline-table; border-spacing:1px; border:solid 1px #999;}
.caption{display:table-caption; text-align:center;}
.colgroup1{display:table-column-group; width:100px;}
.colgroup2{display:table-column-group; width:100px;}
.col1   {display:table-column; width:80px;}
.col2   {display:table-column; width:60px;}
.thead  {display:table-header-group;}
.tfoot  {display:table-footer-group;}
.tbody  {display:table-row-group;}
.tr     {display:table-row; border:solid 1px #999; vertical-align:middle;}
.th     {display:table-cell; border:solid 1px #999; font-weight:bold; text-align:center;}
.td     {display:table-cell; border:solid 1px #999;}
--></style>
</head>

<body>

<span class="intable">
<span class="caption">表題</span>
<span class="colgroup1"></span>
<span class="colgroup2">
  <span class="col1"></span>
  <span class="col2"></span>
</span>
<span class="thead">
<span class="tr"><span class="th">ヘッダ</span><span class="th">ヘッダ</span><span class="th">ヘッダ</span></span>
</span>
<span class="tfoot">
<span class="tr"><span class="td">フッタ</span><span class="td">フッタ</span><span class="td">フッタ</span></span>
</span>
<span class="tbody">
<span class="tr"><span class="td">データ</span><span class="td">データ</span><span class="td">データ</span></span>
<span class="tr"><span class="td">データ</span><span class="td">データ</span><span class="td">データ</span></span>
</span>
</span>

<span class="intable">
<span class="caption">表題</span>
<span class="colgroup1"></span>
<span class="colgroup2">
  <span class="col1"></span>
  <span class="col2"></span>
</span>
<span class="thead">
<span class="tr"><span class="th">ヘッダ</span><span class="th">ヘッダ</span><span class="th">ヘッダ</span></span>
</span>
<span class="tfoot">
<span class="tr"><span class="td">フッタ</span><span class="td">フッタ</span><span class="td">フッタ</span></span>
</span>
<span class="tbody">
<span class="tr"><span class="td">データ</span><span class="td">データ</span><span class="td">データ</span></span>
<span class="tr"><span class="td">データ</span><span class="td">データ</span><span class="td">データ</span></span>
</span>
</span>

</body>
</html>
-ie7は未対応。ie8- ff1- o4- sf1- gc1-は対応。
 

none

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>display none</title>
<style type="text/css"><!--
.n {display:none;}
--></style>
</head>

<body>

<table border="1" class="n">
<caption>表題</caption>
<colgroup span="1" width="100"></colgroup>
<colgroup span="2" width="100">
  <col span="1" width="80">
  <col span="1" width="60">
</colgroup>
<thead>
<tr><th>ヘッダ</th><th>ヘッダ</th><th>ヘッダ</th></tr>
</thead>
<tfoot>
<tr><td>フッタ</td><td>フッタ</td><td>フッタ</td></tr>
</tfoot>
<tbody>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
</tbody>
</table>

</body>
</html>
 
関連項目: display
トップページ CSS2 Note ページトップ
 2008/08/08発行 2009/09/01更新