displayプロパティ

TOPページに戻る > CSS

スポンサード リンク

displayプロパティ

ブロック要素をインライン要素に変更、インライン要素をブロック要素に変更できます。他には要素をリスト項目として表示できたり、table要素のように表示できます

使い方(書式)

セレクタ { display: 値; }                                    

displayプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

プロパティの値 説明
none 要素を非表示にする。レイアウト表示からも消える
inline 要素をインライン要素として表示
インライン要素ではこの値がデフォルトです
block 要素をブロック要素として表示
ブロック要素ではこの値がデフォルトです
list-item 要素をリスト項目として表示
li要素ではこの値がデフォルトです
run-in 要素をランインボックスとして表示
table table要素のような表示になる。ブロック要素
inline-table table要素のような表示になる、インライン要素
table-row-group tbody要素のような行グループになる
table-header-group thead要素のようなheaderの行グループになる
table-footer-group tfoot要素のようなfooterの行グループになる
table-row tr要素のような行になる
table-column-group colgroup要素のような列グループになる
table-column col要素のようtableの列になる
table-cell td要素のようなtableのセルになる
table-caption caption要素のような表tableのcaptionになる
compact 要素をコンパクトボックスとして表示

実際の指定方法

.hoge { display: none; }       /* 要素を非表示にする */
.hoge2 { display: inline; }    /* 要素をインライン要素に変更 */
.hoge3 { display: block; }     /* 要素をブロック要素に変更 */
.hoge4 { display: list-item; } /* 要素をリスト項目に変更 */

html部分

<div class="hoge">display: none;</div>
<p class="hoge2">p要素です</p><span> span要素</span>
<span class="hoge3">span要素1個目</span><span class="hoge3">span要素2個目</span>
<p class="hoge4">p要素がリスト項目として表示</p>

実際の表示

display: none; 要素が非表示になってレイアウトからも消えています

display: none;

display: inline; ブロック要素をインライン要素に変更したので、他のインライン要素と並んで表示できるようになりました

p要素です

 span要素

display: block; インライン要素をブロック要素に変更したので、ブロック要素として表示できるようになりました

span要素1個目span要素2個目

display: list-item; リスト項目として表示できるようになりました

p要素がリスト項目として表示





(C)2012 ホームページ作成無料