zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

表示状態

レイアウト上の位置を保ったまま、要素を表示または非表示にします。

visibility で場所を保ったまま要素を隠したり、再び表示したりします。箱をレイアウトから取り除き、後続の内容を詰めたい場合は display ファミリーの hidden を使います。

クラスと CSS の早見表

クラスの例期待される宣言
invisiblevisibility: hidden;
visiblevisibility: visible;
例の設定

すべてのプレビューは spec 1、reset "none"、strict モード、spacingUnit "0.25rem"、ブレークポイントなしを明示した設定から始まります。数値の spacing はこの単位を掛けて解決し、Tailwind のテーマは継承しません。wind-demo クラスはデモ用の自作スタイルで、HTML と一緒に CSS を確認できます。

使い方の例

場所を残して隠す

invisible は中央の箱を隠しますが flex の位置を保つため、最後の箱は同じ場所にとどまります。

場所を残して隠す
HTML
<div class="wind-demo">
  <div class="wind-demo-frame flex items-center gap-2">
    <div class="wind-demo-tile">Visible</div>
    <div class="wind-demo-tile invisible">Invisible box</div>
    <div class="wind-demo-tile">Space is still reserved</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
.invisible {
  visibility: hidden;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "gap-2",
        "invisible",
        "items-center"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

visibility と display を比較

invisible は場所を残し、hidden は場所ごと取り除きます。最後の項目は visible で通常どおり表示します。

visibility と display を比較
HTML
<div class="wind-demo">
  <p class="wind-demo-note">invisible keeps its flex slot; hidden removes its slot from layout.</p>
  <div class="wind-demo-frame flex items-center gap-2">
    <div class="wind-demo-tile">First</div>
    <div class="wind-demo-tile invisible">Invisible</div>
    <div class="wind-demo-tile hidden">Hidden</div>
    <div class="wind-demo-tile visible">Visible again</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.hidden {
  display: none;
}
.items-center {
  align-items: center;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
.invisible {
  visibility: hidden;
}
.visible {
  visibility: visible;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "gap-2",
        "hidden",
        "invisible",
        "items-center",
        "visible"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

任意値と名前付きの値

このファミリーは任意値のない2つの固定クラスです。visible は visibility:visible、invisible は visibility:hidden を設定します。箱はレイアウト上の場所を保ちますが、visibility:hidden の内容は通常アクセシビリティツリーから外れ、操作できません。hidden は別の display:none ユーティリティです。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

invisible

フィールド値
カタログ識別子v1.invisible
クラスパターンinvisible
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位visibility (47)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティvisibility

受け入れる値

種類接尾辞出力される値
exactnull"hidden"

宣言テンプレート

プロパティ値の種類固定値
visibilityresolvednull

カタログの例

クラスの例期待される宣言
invisiblevisibility: hidden

visible

フィールド値
カタログ識別子v1.visible
クラスパターンvisible
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位visibility (47)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティvisibility

受け入れる値

種類接尾辞出力される値
exactnull"visible"

宣言テンプレート

プロパティ値の種類固定値
visibilityresolvednull

カタログの例

クラスの例期待される宣言
visiblevisibility: visible

Revision History

作成更新