CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのvisibilityプロパティとは？使い方とvisible・hidden・collapseの違いを解説

CSSのvisibilityプロパティで要素を非表示にする

CSSにはvisibilityというプロパティがあり、これを使うとページ上の要素を非表示にできます。このプロパティはJavaScriptと組み合わせることで、複雑なメニューや高度なWebページレイアウトを実現する際にも活用されます。

visibilityプロパティには、以下の表に示す値を指定できます。

値説明
visibleボックスとその内容がユーザーに表示されます。
hiddenボックスとその内容が非表示になります。ただし、レイアウト上のスペースは確保されたままです。
collapse動的なテーブルの列や行に対してのみ使用できる値です。

使用例

次のコードを実行すると、visibleとhiddenの値の動作の違いを確認できます。

<html>
   <head>
      <style>
         p {
            visibility: hidden;
         }
      </style>
   </head>
   <body>
      <p style = "visibility:visible;">
         この段落は表示されます。
      </p>
      <p>
         この段落は表示されません。
      </p>
   </body>
</html>

この例では、スタイルシート内ですべての<p>要素に対してvisibility: hidden;が設定されています。そのため、2つ目の段落は非表示になります。一方、1つ目の段落にはインラインスタイルでvisibility: visible;が明示的に指定されているため、画面に表示されます。

display: noneとの違いに注意

visibility: hiddenと似た挙動をするものとしてdisplay: noneがありますが、両者には重要な違いがあります。visibility: hiddenの場合、要素は見えなくなりますが、元の領域（スペース）は保持されるため、ページのレイアウトに影響しません。一方、display: noneでは要素自体がレンダリングから除外されるため、その分のスペースも消えます。用途に応じて適切に使い分けましょう。

  1. CSSのperspectiveプロパティの使い方を解説！3D要素の奥行き表現

    CSSの perspective プロパティは、3D変形された要素をどのような視点・奥行き感で表示するかを指定するためのプロパティです。値には距離（pxなど）を設定し、数値が小さいほど視点に近づくため、遠近感が強調され、大きいほどフラットな見た目になります。通常は、3D変形を適用する子要素の親要素に perspective を設定します。これにより、子要素の transform による回転や移動に自然な立体感が生まれます。以下のコードでは、親要素に perspective: 80px; を指定し、子要素をX軸方向に45度回転させて、遠近効果を確認できます。サンプルコード<!DOCTYPE

  2. CSSのbackface-visibilityプロパティとは？使い方とサンプルコード解説

    CSSのbackface-visibilityプロパティとは backface-visibilityプロパティは、要素が画面（閲覧者）の方を向いていない状態、つまり裏面が見えているときに、その要素を表示するかどうかを指定するためのCSSプロパティです。 このプロパティは、transformによる3D変換（rotateX()やrotateY()など）を適用した要素に対して効果を発揮します。裏返った要素の背面を見せるか隠すかを制御できるため、カードをめくるようなフリップアニメーションなどでよく活用されます。 指定できる値 visible（初期値）：要素が裏向きになっても背面を表示します。 hi