Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームHTMLリファレンス(アルファベット検索)>displayプロパティ

CSSプロパティ辞典
タグ一覧(ABC順) 目的別タグ一覧 スタイルシート一覧(ABC順) 目的別スタイルシート一覧

display プロパティ …要素の表示形式(ブロック要素・インライン要素など)を指定する

使用プロパティ

CSSプロパティ

display: 値;

対象となる
要素

すべて

継承

しない

次項(値と働き)を参照してください。
また、値に対応するブラウザは(ブラウザの対応状況)で確認してください。

対応ブラウザ IE6 WinFireFox WinSafariFireFox MacIE5 macOpera

解説

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| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

logo
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system