サイト内検索
...スタイルシート(css)...
スタイルシート・ボックス
文章を表示・非表示
- 文章を表示・非表示するには、visibilityプロパティを指定します。
- 領域も消したい場合{display: none;}を指定します。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| visibility: | visible; | 表示します。（初期値） |
| hidden; | 表示しません。 |
画面の表示のされ方
- 画面の表示のされ方は、displayプロパティを指定します。
- [使い方]
- .sample1{display: block;}
- .sample2{display: inline;}
- .sample3{display: list-item; margin-left: 20px;}
- .sample4{display: none;}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| display: | block; | [ブロック形式で表示]
見出しや段落などのような、文書の骨組みとなる要素です。 横幅いっぱいの領域を持つので、 要素の前後には自動的に改行が入ることになります。 ブロック要素の中には、 別のブロック要素やインライン要素を入れることができます。 |
| inline; | [インライン形式で表示]
リンクや文字の強調などのような、 文章中の一部として扱われる要素です。 行の一部として扱われて、要素の前後には改行は入りません。 インライン要素の中には、 別のインライン要素を入れることができますが、 ブロック要素を入れることはできません。 |
|
| list-item; | リスト項目として表示します。 | |
| none; | 表示しません。 |
ブロック要素とインライン要素
[ブロック(block) 要素]
- ブロック要素の前後には、改行が入ります。
- ブロック要素（オレンジの枠線部分）が、その領域が幅いっぱいに広がります。
- インライン要素の前後には[インライン(inline)要素]改行は入りません。
- インライン要素（赤い枠線部分）は文章中の一部分として扱われることになります。
