ホーム>HTMLリファレンス(アルファベット検索)>displayプロパティ
display プロパティ …要素の表示形式(ブロック要素・インライン要素など)を指定する
使用プロパティ
|
display: 値; |
対象となる
要素 |
すべて |
継承 |
しない
|
値 |
次項(値と働き)を参照してください。
また、値に対応するブラウザは(ブラウザの対応状況)で確認してください。 |
|
|
解説
display プロパティを使えば、要素の表示形式を指定することができます。
このプロパティを指定すると、ブロック要素をインライン形式で表示したり、インライン要素をブロック形式で表示することができます。
※指定する値によってはブラウザにより対応状況に違いがあるものもありますので注意が必要です。詳しくはブラウザの対応状況を参照してください。
|
値 |
働き |
値 |
働き |
none |
要素を表示しない。 |
inline |
インライン要素にする。 |
block |
ブロック要素にする。 |
list-item |
li 要素のようにリスト項目にする。 |
run-in |
要素の後が float または position で位置を指定されていない場合には、後に続く要素の先頭にインライン要素として表示されます。それ以外は、ブロックレベルで表示されます。 |
compact |
要素の後が float または position で位置を指定されていない場合で、後にくるブロックレベル要素の左マージンの幅以内で、compactを指定する要素の幅が後にくるブロック要素の余白に入り切る場合は、後に続く要素の先頭にインライン要素として表示されます。入り切らない場合は、ブロックレベルとして表示されます。 |
marker |
リストの先頭に来る黒丸や数字のようなマーカーになる。 |
table |
table 要素のように、表のように表示される。 |
inline-table |
table 要素のように、表のように表示される。ただし、インライン要素として表示される。 |
table-caption |
caption 要素のように、表のキャプション(題名)となります。 |
table-row |
tr 要素のように表の行グループとなります。 |
table-cell |
th 要素や td 要素のように表のセルとなります。 |
table-row-group |
tbody 要素のように、表の行グループとなります。 |
table-header-group |
thead 要素のように、表のヘッダーの行グループとなります。 |
table-footer-group |
tfoot 要素のように、表のフッターの行グループとなります。 |
table-column-group |
colgroup 要素のように、表の列グループとなります。 |
table-column |
col 要素のように、表の列となります。 |
|
|
|
Win IE6 |
Win FF |
SF |
Mac IE5 |
Mac FF |
OP |
none |
○ |
○ |
○ |
○ |
○ |
○ |
inline |
○ |
○ |
○ |
○ |
○ |
○ |
block |
○ |
○ |
○ |
○ |
○ |
○ |
list-item |
○ |
○ |
○ |
○ |
○ |
○ |
run-in |
× |
× |
○ |
○ |
× |
○ |
compact |
× |
× |
× |
× |
× |
○ |
marker |
× |
× |
× |
× |
× |
× |
表(table)関連 |
× |
× |
○ |
× |
○ |
○ |
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
h3,span {
background-color: greenyellow;
}
.sample1 {
display: inline;
}
.sample2 {
display: block;
}
</style>
</head>
<!--ページの本文-->
<body>
<p><h3 class="sample1">見出し</h3>をインラインレベルで表示しています。</p>
<p><span class="sample2">インライン要素</span>をブロックレベルで表示しています。</p>
</body>
</html> |
|
[ブラウザでの表示例]
HOME PAGE ZERO ガイド |
見出し をインラインレベルで表示しています。
インライン要素をブロックレベルで表示しています。
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他