スポンサード リンク
displayプロパティ
ブロック要素をインライン要素に変更、インライン要素をブロック要素に変更できます。他には要素をリスト項目として表示できたり、table要素のように表示できます使い方(書式)
セレクタ { display: 値; }
displayプロパティ
対応ブラウザ | |
適用できる要素 | 全ての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: inline; ブロック要素をインライン要素に変更したので、他のインライン要素と並んで表示できるようになりました
p要素です
span要素display: block; インライン要素をブロック要素に変更したので、ブロック要素として表示できるようになりました
span要素1個目span要素2個目display: list-item; リスト項目として表示できるようになりました
p要素がリスト項目として表示