CSSで要素の表示モードを変更するコードを紹介します。

概要

CSSを用いて要素の表示を変更する場合は、display プロパティを利用します。

書式

(値) には以下の値を設定できます。

値	意味
none	要素を非表示にします。
inline	インライン要素(インラインボックス)として表示します。
block	ブロック要素(ブロックボックス)として表示します。
table	テーブル要素として表示します。
inherit	親要素の値を継承します。
list-item	リスト要素として表示します。
run-in	指定要素の後のブロックレベル要素が、回り込み（float）または絶対配置されていない場合に、先頭にインラインレベルとして表示されます。それ以外の場合は、ブロックレベルで表示されます。
inline-block	幅や高さなどを指定できるインライン要素として表示します。
inline-table	インラインテーブル要素として表示します
table-header-group	テーブルヘッダグループとして表示します。
table-footer-group	テーブルフッタグループとして表示します。
table-row-group	テーブル列グループとして表示します。
table-row	テーブル列として表示します。
table-column-group	テーブルカラムグループとして表示します。
table-column	テーブルカラム要素として表示します。
table-caption	テーブルキャプション要素として表示します。
table-cell	テーブルのセル要素として表示します。
ruby	ルビ要素として表示します。
ruby-base	ルビ要素として表示します。
ruby-text	ルビ要素として表示します。
ruby-base-group	ルビのグループ要素として表示します。
ruby-text-group	ルビのグループ要素として表示します。