CSS の表示と可視性

---

display プロパティは要素の表示方法を設定し、visibility プロパティは要素を表示するか非表示にするかを指定します。

---

要素を非表示にする - display:none または Visibility:hidden

display 属性を「none」に設定するか、visibility 属性を「hidden」に設定して、要素を非表示にします。ただし、これら 2 つの方法では異なる結果が得られることに注意してください。

visibility:hidden は要素を非表示にできますが、非表示の要素は非表示になる前と同じスペースを占有する必要があります。つまり、要素は非表示になっていますが、レイアウトには影響します。

例

      
  
这是一个明显的标题
 
这是一个隐藏标题
 
注意,隐藏标题仍然占用空间.
  

プログラムを実行して試してください

---

display:none要素を非表示にすることができ、非表示の要素はスペースを占有しません。つまり、要素が非表示になるだけでなく、その要素が元々占めていたスペースもページ レイアウトから消えます。

例

      
  
这是一个明显的标题
 
这是一个隐藏的标题
 
注意,display:none 隐藏不占用空间.
  

プログラムを実行して試してみてください

---

CSS表示 - ブロック要素とインライン要素

ブロック要素は、前に改行があり、全幅を占める要素です。以降。

ブロック要素の例:

---

インライン要素は必要な幅のみを必要とし、強制的な折り返しは必要ありません。

インライン要素の例:

---

要素の表示を変更する方法

インライン要素とブロック要素を変更したり、その逆を行ったりして、Web 標準に準拠しながらページを特定の方法でまとめて見えるようにすることができます。

次の例は、リスト項目をインライン要素として表示します:

    
  
这个链接列表显示为一个水平菜单:
 
 
HTML
 
CSS
 
JavaScript
 
XML
 
  

プログラムを実行して試してください

---

例

次の例は、span要素をブロック要素として表示します

      
  
Nirvana
 Record: MTV Unplugged in New York Year: 1993 
Radiohead
 Record: OK Computer Year: 1997  

プログラムを実行して、試してみてください

---