zfb
GitHub リポジトリ

検索したい単語を入力

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

テキスト装飾

文字の装飾、大小文字、フォントスタイル、数字の形、平滑化を設定します。

ソースの単語を変えずに、文字装飾、英字の大文字小文字、フォントの表示方法を調整します。異なる CSS プロパティを扱うため、必要な挙動だけを組み合わせます。

クラスと CSS の早見表

クラスの例期待される宣言
underlinetext-decoration-line: underline;
overlinetext-decoration-line: overline;
line-throughtext-decoration-line: line-through;
no-underlinetext-decoration-line: none;
uppercasetext-transform: uppercase;
lowercasetext-transform: lowercase;
capitalizetext-transform: capitalize;
normal-casetext-transform: none;
italicfont-style: italic;
not-italicfont-style: normal;
tabular-numsfont-variant-numeric: tabular-nums;
antialiased-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
例の設定

共通のプレビュー設定では spec 1、reset none、strict モード、spacingUnit 0.25rem、ブレークポイントなしを明示しています。各クラスは挙動を確認するテキストに直接付けます。デモ用 CSS はレイアウト、枠、余白、リンク色のみを加えます。大文字小文字の変換はラテン文字に作用し、かなや漢字は変換しません。

使い方の例

文字装飾線を選ぶ

下線、上線、取り消し線を比べます。最後のリンクには標準の下線があるため、no-underline の解除結果を確認できます。

文字装飾線を選ぶ
HTML
<div class="wind-demo-style-stack">
  <p><span class="underline">Underline / 下線</span></p>
  <p><span class="overline">Overline / 上線</span></p>
  <p><span class="line-through">Line through / 取り消し線</span></p>
  <p><a href="#normal-text" class="no-underline">No underline / 下線なし</a></p>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-style-stack {
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: .6rem 1rem;
}

.wind-demo-style-stack p {
  margin: 0;
  padding: .45rem 0;
  border-bottom: 1px solid #d8e0e8;
}

.wind-demo-style-stack p:last-child {
  border-bottom: 0;
}

.wind-demo-style-stack a {
  color: inherit;
}
.line-through {
  text-decoration-line: line-through;
}
.no-underline {
  text-decoration-line: none;
}
.overline {
  text-decoration-line: overline;
}
.underline {
  text-decoration-line: underline;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-style-stack": true
    },
    "safelist": {
      "docs-preview": [
        "underline",
        "overline",
        "line-through",
        "no-underline"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-style-stack { color: #223247; border: 1px solid #b7c5d4; padding: 0.6rem 1rem; }
.wind-demo-style-stack p { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-style-stack p:last-child { border-bottom: 0; }
.wind-demo-style-stack a { color: inherit; }

ラテン文字の大小を変える

同じ日英の文で4種類の変換を比べます。日本語の文字は変化しません。

ラテン文字の大小を変える
HTML
<div class="wind-demo-style-stack">
  <p><span class="uppercase">Wind notes / 見出しの整え方</span></p>
  <p><span class="lowercase">Wind notes / 見出しの整え方</span></p>
  <p><span class="capitalize">wind notes / 見出しの整え方</span></p>
  <p><span class="normal-case">WIND NOTES / 見出しの整え方</span></p>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-style-stack {
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: .6rem 1rem;
}

.wind-demo-style-stack p {
  margin: 0;
  padding: .45rem 0;
  border-bottom: 1px solid #d8e0e8;
}

.wind-demo-style-stack p:last-child {
  border-bottom: 0;
}
.capitalize {
  text-transform: capitalize;
}
.lowercase {
  text-transform: lowercase;
}
.normal-case {
  text-transform: none;
}
.uppercase {
  text-transform: uppercase;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-style-stack": true
    },
    "safelist": {
      "docs-preview": [
        "uppercase",
        "lowercase",
        "capitalize",
        "normal-case"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-style-stack { color: #223247; border: 1px solid #b7c5d4; padding: 0.6rem 1rem; }
.wind-demo-style-stack p { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-style-stack p:last-child { border-bottom: 0; }

強調と数字を整える

italic と通常の強調、tabular-nums、スムージングを確認します。数字の形とスムージングはフォントや環境に依存します。

強調と数字を整える
HTML
<div class="wind-demo-type-grid">
  <p>Style: <em class="italic">italic</em> and <em class="not-italic">roman emphasis</em>.</p>
  <div class="wind-demo-number-grid"><span>Default digits</span><span>1,111.11</span><span>Tabular digits</span><span class="tabular-nums">1,111.11</span></div>
  <p class="antialiased">Smoothing can look different on each display. / 画面によって見え方が変わります。</p>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-type-grid {
  max-width: 28rem;
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: 1rem;
}

.wind-demo-type-grid > p {
  margin: 0 0 .85rem;
}

.wind-demo-type-grid > p:last-child {
  margin: .85rem 0 0;
  border-top: 1px solid #d8e0e8;
  padding-top: .75rem;
}

.wind-demo-number-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem 1rem;
}
.italic {
  font-style: italic;
}
.not-italic {
  font-style: normal;
}
.tabular-nums {
  font-variant-numeric: tabular-nums;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-type-grid": true,
      "wind-demo-number-grid": true
    },
    "safelist": {
      "docs-preview": [
        "italic",
        "not-italic",
        "tabular-nums",
        "antialiased"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-type-grid { max-width: 28rem; color: #223247; border: 1px solid #b7c5d4; padding: 1rem; }
.wind-demo-type-grid > p { margin: 0 0 0.85rem; }
.wind-demo-type-grid > p:last-child { margin: 0.85rem 0 0; border-top: 1px solid #d8e0e8; padding-top: 0.75rem; }
.wind-demo-number-grid { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; }

任意値と名前付きの値

underline、overline、line-through、no-underline は text-decoration-line を指定します。4つの case クラスは text-transform を扱い、normal-case は none に戻します。italic と not-italic は font-style を指定します。tabular-nums は等幅の数字を要求しますが、選んだフォントが対応している場合にだけ見た目に表れます。antialiased は環境依存のフォントスムージングを設定するため、ブラウザーや OS によって差が小さいことがあります。このファミリーは固定クラスで、名前付き値トークンはありません。

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

カタログの詳細

line-through

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

受け入れる値

種類接尾辞出力される値
exactnull"line-through"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
line-throughtext-decoration-line: line-through

no-underline

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
no-underlinetext-decoration-line: none

overline

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
overlinetext-decoration-line: overline

underline

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
underlinetext-decoration-line: underline

capitalize

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
capitalizetext-transform: capitalize

lowercase

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
lowercasetext-transform: lowercase

normal-case

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
normal-casetext-transform: none

uppercase

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
uppercasetext-transform: uppercase

italic

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
italicfont-style: italic

not-italic

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
not-italicfont-style: normal

tabular-nums

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

受け入れる値

種類接尾辞出力される値
exactnull"tabular-nums"

宣言テンプレート

プロパティ値の種類固定値
font-variant-numericresolvednull

カタログの例

クラスの例期待される宣言
tabular-numsfont-variant-numeric: tabular-nums

antialiased

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
-webkit-font-smoothingfixed"antialiased"
-moz-osx-font-smoothingfixed"grayscale"

カタログの例

クラスの例期待される宣言
antialiased-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale

Revision History

作成更新