zfb
GitHub リポジトリ

検索したい単語を入力

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

テキスト装飾

カタログ値を使ってテキスト装飾の色、太さ、線種を設定します。

見える下線、上線などのある要素で、text-decoration の色、太さ、線種を設定します。

クラスと CSS の早見表

クラスの例期待される宣言
decoration-accenttext-decoration-color: var(--zw-color-accent);
decoration-2text-decoration-thickness: 2px;
decoration-solidtext-decoration-style: solid;
decoration-doubletext-decoration-style: double;
decoration-dottedtext-decoration-style: dotted;
decoration-dashedtext-decoration-style: dashed;
decoration-wavytext-decoration-style: wavy;
decoration-[#b42318]/80text-decoration-color: color-mix(in oklab, #b42318 80%, transparent);
例の設定

共通のプレビュー設定では spec 1、reset none、strict モード、spacingUnit 0.25rem、ブレークポイントなしを明示しています。名前付きの例では tokens.colors.accent を設定します。自作 CSS は読みやすい文字色を指定してブラウザー標準のリンク下線を残し、text-decoration-color は指定しません。

使い方の例

名前付き色とキーワードを使う

設定済み accent、currentColor、transparent で下線色を変えます。同じプレビューで 2px の太さと各 text-decoration style も示します。

名前付き色とキーワードを使う
HTML
<p class="wind-demo-decoration">A <a href="#accent" class="decoration-accent">configured accent underline</a>, a <a href="#current" class="decoration-current">current-color underline</a>, and a <a href="#transparent" class="decoration-transparent">transparent underline</a>. <a href="#thickness" class="decoration-2">2px underline</a>; style samples: <a href="#solid" class="decoration-solid">solid</a>, <a href="#double" class="decoration-double">double</a>, <a href="#dotted" class="decoration-dotted">dotted</a>, <a href="#dashed" class="decoration-dashed">dashed</a>, <a href="#wavy" class="decoration-wavy">wavy</a>.</p>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-accent: #a23862;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-decoration {
  max-width: 34rem;
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: .8rem;
  line-height: 1.8;
}

.wind-demo-decoration a {
  color: inherit;
}
.decoration-accent {
  text-decoration-color: var(--zw-color-accent);
}
.decoration-current {
  text-decoration-color: currentColor;
}
.decoration-transparent {
  text-decoration-color: transparent;
}
.decoration-2 {
  text-decoration-thickness: 2px;
}
.decoration-dashed {
  text-decoration-style: dashed;
}
.decoration-dotted {
  text-decoration-style: dotted;
}
.decoration-double {
  text-decoration-style: double;
}
.decoration-solid {
  text-decoration-style: solid;
}
.decoration-wavy {
  text-decoration-style: wavy;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "accent": "#a23862"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-decoration": true
    },
    "safelist": {
      "docs-preview": [
        "decoration-2",
        "decoration-accent",
        "decoration-current",
        "decoration-dashed",
        "decoration-dotted",
        "decoration-double",
        "decoration-solid",
        "decoration-transparent",
        "decoration-wavy"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-decoration { max-width: 34rem; color: #223247; border: 1px solid #b7c5d4; padding: 0.8rem; line-height: 1.8; }
.wind-demo-decoration a { color: inherit; }

任意色と不透明度を加える

角括弧の色を CSS として検証し、/80 で対応する不透明度を適用します。文字色は継承した色のままです。

任意色と不透明度を加える
HTML
<p class="wind-demo-decoration">An <a href="#custom" class="decoration-[#b42318]/80">arbitrary red decoration at 80 percent opacity</a> keeps the text color unchanged.</p>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-accent: #a23862;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-decoration {
  max-width: 34rem;
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: .8rem;
  line-height: 1.8;
}

.wind-demo-decoration a {
  color: inherit;
}
.decoration-\[\#b42318\]\/80 {
  text-decoration-color: color-mix(in oklab, #b42318 80%, transparent);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "accent": "#a23862"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-decoration": true
    },
    "safelist": {
      "docs-preview": [
        "decoration-[#b42318]/80"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-decoration { max-width: 34rem; color: #223247; border: 1px solid #b7c5d4; padding: 0.8rem; line-height: 1.8; }
.wind-demo-decoration a { color: inherit; }

任意値と名前付きの値

decoration-accent は tokens.colors.accent を参照します。decoration-current は要素の現在の文字色を使い、decoration-transparent は装飾の位置を保ったまま色を透明にします。decoration-[#b42318] のような任意色は CSS カラーパーサーで検証され、/80 のような対応する不透明度修飾子は色に透明度を加えます。このファミリーに自動パレットはないため、名前付き色はすべて設定が必要です。 整数の decoration-2 は text-decoration-thickness: 2px を出力し、0 以上の角括弧付き長さも使えます。正確な decoration-solid、-double、-dotted、-dashed、-wavy は text-decoration-style を設定します。完全な色トークンが設定されていれば style 名より優先されます。thickness/style の負数とスラッシュは拒否され、decoration-auto と decoration-from-font は未対応です。

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

カタログの詳細

decoration

フィールド値
カタログ識別子v1.decoration.color
クラスパターンdecoration-<suffix>
文法{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"text-decoration-color","allowsFractionSlash":false,"allowsColorOpacity":true}
受け入れる値2
トークンカテゴリcolors
負の値の規則forbidden
競合グループと順位text-decoration-color (45)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティtext-decoration-color

受け入れる値

種類接尾辞出力される値
keyword"transparent""transparent"
keyword"current""currentColor"

宣言テンプレート

プロパティ値の種類固定値
text-decoration-colorresolvednull

カタログの例

クラスの例期待される宣言
decoration-[red]/40text-decoration-color: color-mix(in oklab, red 40%, transparent)

decoration

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
text-decoration-thicknessresolvednull

カタログの例

クラスの例期待される宣言
decoration-2text-decoration-thickness: 2px

decoration-dashed

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
text-decoration-styleresolvednull

カタログの例

クラスの例期待される宣言
decoration-dashedtext-decoration-style: dashed

decoration-dotted

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
text-decoration-styleresolvednull

カタログの例

クラスの例期待される宣言
decoration-dottedtext-decoration-style: dotted

decoration-double

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
text-decoration-styleresolvednull

カタログの例

クラスの例期待される宣言
decoration-doubletext-decoration-style: double

decoration-solid

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
text-decoration-styleresolvednull

カタログの例

クラスの例期待される宣言
decoration-solidtext-decoration-style: solid

decoration-wavy

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
text-decoration-styleresolvednull

カタログの例

クラスの例期待される宣言
decoration-wavytext-decoration-style: wavy

Revision History

作成更新