display プロパティを利用して要素を非表示にする方法はこちらの記事を参照してください。
CSSで要素の表示モードを変更するコードを紹介します。
CSSを用いて要素の表示を変更する場合は、display プロパティを利用します。
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 | ルビのグループ要素として表示します。 |
