HTML と CSS を使用して要素の表示と非表示を制御する方法

HTML は、Web ページ内のコンテンツを構造化して表示するために使用されるマークアップ言語です。 Web ページでは、要素の表示と非表示は一般的なニーズです。この記事では、HTML と CSS を使用して要素を表示および非表示にする方法を説明します。

1. 要素の表示

1. display 属性

要素を表示するには、CSS の display 属性を使用できます。このプロパティを使用すると、要素をさまざまな表示モードに設定できます。

たとえば、要素をブロック レベルの要素に設定でき、display:block 属性を使用すると、要素はブロックとして表示されます。

<div style="display:block">这是一个块级元素</div>

要素をインライン要素に設定することもできます。display:inline 属性を使用すると、要素は行として表示されます。

<div style="display:inline">这是一个行内元素</div>

場合によっては、display:inline-block 属性を使用して、要素をインライン ブロック要素に設定することもできます。インライン ブロックは、インライン要素とブロックレベル要素のハイブリッドであり、ブロックとしてレイアウトしたり、インライン要素内にネストしたりできます。

<div style="display:inline-block">这是一个行内块级元素</div>

2. visibility 属性

一般的に使用されるもう 1 つの属性は、visibility 属性です。 Visibility 属性は、要素が表示されるかどうかを制御します。 display 属性とは異なり、visibility 属性は要素の可視性を制御するだけで、ページ上の要素のレイアウトは変更しません。

要素の可視性属性を非表示に設定すると、要素はページから消えます。ただし、要素のスペースは引き続き占有されており、要素の親要素の背景やその他のコンテンツが表示されます。

<div style="visibility:hidden">这个元素消失了</div>

3. 不透明度属性

不透明度属性を使用すると、要素の透明度を制御できます。 0 から 1 までの値を受け入れます。0 は完全に透明、1 は完全に不透明を意味します。

<div style="opacity:0.5">这个元素半透明</div>

2. 非表示要素

1. display 属性

display 属性は、要素を表示するために使用されるだけでなく、要素を非表示にするためにも使用できます。 。表示属性が none に設定されている場合、要素は完全に消え、ページ上のスペースを占有しません。

<div style="display:none">这个元素完全消失了</div>

2. visibility 属性

visibility 属性を使用して要素の可視性を制御できることを前述しました。同様に、visibility プロパティが hidden に設定されている場合、要素も非表示になります。ただし、display:none を使用する場合とは異なり、要素はページ上のスペースを占有します。

<div style="visibility:hidden">这个元素被隐藏了</div>

3. 結論

Web 開発では、要素の表示と非表示を制御することは非常に基本的な操作です。 HTML と CSS には、この操作を実現するための複数のメソッドが用意されており、制御のニーズに合ったメソッドを選択できます。

この記事が、読者が Web 開発における要素の表示と非表示を制御するのに役立つことを願っています。

以上がHTML と CSS を使用して要素の表示と非表示を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。