CSS の表示と可視性_html/css_WEB-ITnose

要素を表示するかどうかを設定する方法 Visibility 属性は、要素を表示するか非表示にするかを指定します。

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

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

visibility:hidden を使用すると要素を非表示にできますが、以前と同じスペースが必要になります。要素は非表示になりますが、レイアウトには影響します。

h1.hidden {visibility:hidden;}

display: 隠れた要素はなく、スペースも取りません。要素は非表示になりますが、ページは表示されます:

h1.hidden {display:none;}

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

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

ブロック要素の例:

• 4a249f0d628e2318394fd9b75b4636b1

• e388a4556c0f65e1904146cc1a846bee

• dc6dce4a544fdca2df29d5ac0ea9906b

インライン要素には必要な幅のみが必要であり、改行は強制されません。

インライン要素の例:

• 45a2772a6b6107b401db3c9b82c049c2

• 3499910bf9dac5ae3c52d5ede7383485

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

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

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

li {display:inline;}

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

span {display:block;}

注: 要素がどのように表示され、どのように表示されるかを確認するには、要素の表示タイプを変更します。要素はどのように見えるか。たとえば、display:block に設定されたインライン要素の内部にネストされたブロック要素を含めることはできません。 .

その他の例

要素をインラインで表示する方法。

この例は、要素をインラインで表示する方法を示します。

要素のブロック要素を表示する方法。

この例は、要素のブロック要素を表示する方法を示します。

テーブルの折りたたみ属性の使用方法

この例は、テーブルの折りたたみ属性の使用方法を示します