zfb
GitHub リポジトリ

検索したい単語を入力

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

不透明度

要素の不透明度を整数の割合または検証済みの任意の値で設定します。

要素全体とその子要素に opacity を指定します。

クラスと CSS の早見表

クラスの例期待される宣言
opacity-55opacity: 0.55;
opacity-[0.35]opacity: 0.35;
例の設定

共通プレビュー設定では spec 1、reset: "none"、strict モード、tokens.spacingUnit: "0.25rem"、ブレークポイントなしを明示しています。名前付きの値は各例で設定し、既定のパレットやテーマは継承しません。wind-demo クラスはデモ用の自作スタイルです。各例では、その CSS とユーティリティの宣言を分けて確認できます。

使い方の例

要素全体の不透明度を比べる

一つの色トークンを 100%、55%、任意値の 0.35 で表示します。ラベルはスウォッチの外に置き、不透明のままにします。

要素全体の不透明度を比べる
HTML
<div class="wind-demo-opacity-list"><div class="wind-demo-opacity-row"><span class="wind-demo-opacity-label">100 percent</span><div class="wind-demo-swatch bg-accent opacity-100"></div></div><div class="wind-demo-opacity-row"><span class="wind-demo-opacity-label">55 percent</span><div class="wind-demo-swatch bg-accent opacity-55"></div></div><div class="wind-demo-opacity-row"><span class="wind-demo-opacity-label">35 percent</span><div class="wind-demo-swatch bg-accent opacity-[0.35]"></div></div></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-accent: #075985;
    --zw-color-alert: #8b1e3f;
    --zw-color-focus: #0f766e;
    --zw-color-ink: #16324f;
    --zw-color-panel: #edf4f8;
    --zw-color-white: #fff;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-opacity-list {
  display: grid;
  gap: .55rem;
  max-width: 28rem;
  color: #16324f;
  font: 14px / 1.4 system-ui, sans-serif;
}

.wind-demo-opacity-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  align-items: center;
  gap: .8rem;
}

.wind-demo-swatch {
  height: 2.4rem;
}
.bg-accent {
  background-color: var(--zw-color-accent);
}
.opacity-100 {
  opacity: 1;
}
.opacity-55 {
  opacity: 0.55;
}
.opacity-\[0\.35\] {
  opacity: 0.35;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "ink": "#16324f",
        "accent": "#075985",
        "focus": "#0f766e",
        "alert": "#8b1e3f",
        "panel": "#edf4f8",
        "white": "#ffffff"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-opacity-label": true,
      "wind-demo-opacity-list": true,
      "wind-demo-opacity-row": true,
      "wind-demo-swatch": true
    },
    "safelist": {
      "docs-preview": [
        "bg-accent",
        "opacity-100",
        "opacity-55",
        "opacity-[0.35]"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-opacity-list { display: grid; gap: 0.55rem; max-width: 28rem; color: #16324f; font: 14px/1.4 system-ui, sans-serif; }
.wind-demo-opacity-row { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: 0.8rem; }
.wind-demo-swatch { height: 2.4rem; }

任意値と名前付きの値

整数の接尾辞は 0〜100 の割合です。opacity-55 は 0.55、opacity-100 は完全不透明になります。角括弧には 0〜1 の数値、または 0%〜100% の割合を指定できます。このユーティリティは要素全体と子要素を一緒に薄くします。色のスラッシュ修飾子は異なり、色プロパティだけを transparent と混ぜます。小さな文字やコントロールではコントラストが落ちるため、要素 opacity の使用に注意してください。

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

カタログの詳細

opacity

フィールド値
カタログ識別子v1.opacity
クラスパターンopacity-<suffix>
文法{"acceptedKinds":["integer","arbitrary"],"arbitraryProperty":"opacity","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値この項目には独立した値の定義がありません。
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位opacity (34)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティopacity

受け入れる値

この項目には独立した値の定義がありません。

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
opacity-50opacity: 0.5

Revision History

作成更新