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

CSSのvisibilityプロパティでvisibleを指定する方法

CSSのvisibilityプロパティにvisibleを指定すると、要素を表示状態にすることができます。この値はvisibilityプロパティの初期値であり、親要素などでhiddenが設定されている場合でも、個別にvisibleを指定することで要素を強制的に表示させられます。

基本的な使い方

以下のコードでは、スタイルシートですべての<p>要素に対してvisibility: hidden;を指定していますが、最初の段落にはインラインスタイルでvisibility: visible;を上書き指定しているため、画面上に表示されます。

サンプルコード

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

実行結果のポイント

  • 1つ目の段落はvisibleが指定されているため、通常どおり表示されます。
  • 2つ目の段落はhiddenが適用されるため非表示になりますが、領域自体は保持されます。これはdisplay: none;との大きな違いです。

visibilityとdisplayの違い

visibility: hidden;は要素を見えなくするだけで、レイアウト上のスペースはそのまま残ります。一方、display: none;は要素自体が存在しないものとして扱われ、スペースも占有しません。レイアウトを崩したくない場合にはvisibilityの利用が適しています。

  1. CSSのcubic-bezier()関数の使い方をわかりやすく解説

    CSSでカスタムのイージング（加速・減速のカーブ）を定義したいときに便利なのが、cubic-bezier()関数です。この関数を使うことで、トランジションやアニメーションの速度変化を4つの制御点の値で細かく調整できます。cubic-bezier()関数とはcubic-bezier(x1, y1, x2, y2)の形式で指定し、それぞれの引数には0〜1の範囲（x軸）および任意の値（y軸）を取る数値を渡します。ベジェ曲線の形状によって、アニメーションが「ゆっくり始まって速く終わる」「一瞬オーバーシュートして戻る」などの表現が可能になります。実装例以下のコードでは、マウスホバー時にdiv要素の幅が3

  2. repeating-radial-gradient()関数の使い方｜CSSで繰り返し放射状グラデーションを作成する方法

    CSSのrepeating-radial-gradient()関数を使用すると、中心点から外側に向かって広がる放射状グラデーション（radial gradient）を、指定した範囲で繰り返し描画できます。通常のradial-gradient()関数と異なり、グラデーションのパターンが要素全体に自動的に反復されるため、ストライプ状や同心円状の装飾的な背景を簡単に作成できます。基本構文background: repeating-radial-gradient(色 位置%, 色 位置%, ...);各カラーストップには「色」と「開始位置」を指定します。最後のカラーストップの位置まで達すると、そのパタ