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

CSSのvisibilityプロパティの使い方：hiddenで要素を非表示にする方法

CSSのvisibilityプロパティにhiddenを指定すると、要素を非表示にすることができます。この値が設定された要素は画面上から消えますが、レイアウト上のスペースは保持されるという特徴があります。

visibility: hidden の基本

非表示にしたい要素に対して、次のようにスタイルを指定します。

selector {
    visibility: hidden;
}

実装例

以下のコードでは、1つ目の段落は通常どおり表示され、2つ目の段落はvisibility: hidden;によって非表示になります。

<html>
    <head>
    </head>
    <body>
        <p>この段落は通常どおり表示されます。</p>
        <p style = "visibility:hidden;">
            この段落は表示されません。
        </p>
    </body>
</html>

display: none との違い

visibility: hidden;と似た効果を持つものにdisplay: none;がありますが、両者には重要な違いがあります。visibility: hidden;は要素を見えなくするだけで、要素が占める領域はそのまま残ります。一方、display: none;は要素自体がレイアウトから取り除かれるため、後続の要素が詰めて表示されます。

スペースを維持したまま要素を一時的に隠したい場合には、visibility: hidden;を使用するのが適しています。

  1. CSSのoverflow:hiddenとは？使い方と実装例をわかりやすく解説

    CSSのoverflowプロパティにhidden（非表示）を指定すると、要素のボックスからはみ出したコンテンツが切り取られ、表示されなくなります。スクロールバーも表示されないため、あふれた部分を完全に隠したい場合に便利です。 以下のコードを実行して、overflow: hiddenの動作を確認してみましょう。 サンプルコード <!DOCTYPE html> <html>    <head>       <style>          div {

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

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