zfb
GitHub リポジトリ

検索したい単語を入力

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

行の高さ

設定済みトークンまたは任意の CSS 値から行の高さを設定します。none トークンを設定していない場合、leading-none は 1 になります。

テキストの行と行の間隔を調整します。短いラベルや大きな見出しには詰めた値、本文には読みやすい余裕を持たせた値が向きます。

クラスと CSS の早見表

クラスの例期待される宣言
leading-copyline-height: var(--zw-leading-copy);
leading-[1.8]line-height: 1.8;
例の設定

共通のプレビュー設定では spec 1、reset none、strict モード、spacingUnit 0.25rem、ブレークポイントなしを明示しています。トークンを使う例は tokens.lineHeights を宣言します。名前付きの compact と copy は倍率で、leading-[1.8] は任意の倍率です。leading ユーティリティから font-size トークンは生成されません。

使い方の例

名前付きの行の高さを比べる

同じ文章に異なる倍率を設定し、行の基準線の間隔を比べます。

名前付きの行の高さを比べる
HTML
<div class="wind-demo-leading">
  <div><span class="wind-demo-label">Compact</span><p class="leading-compact">Line height controls the distance between baselines. The same paragraph makes the spacing easier to compare. / 行の高さは行の基準線の間隔を調整します。</p></div>
  <div><span class="wind-demo-label">Copy</span><p class="leading-copy">Line height controls the distance between baselines. The same paragraph makes the spacing easier to compare. / 行の高さは行の基準線の間隔を調整します。</p></div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-leading-compact: 1.25;
    --zw-leading-copy: 1.65;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-leading {
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: 1rem;
}

.wind-demo-leading > div + div {
  margin-top: 1rem;
  border-top: 1px solid #d8e0e8;
  padding-top: .75rem;
}

.wind-demo-leading p {
  margin: .35rem 0 0;
}

.wind-demo-label {
  color: #5d6c7c;
  font-size: .8rem;
}
.leading-compact {
  line-height: var(--zw-leading-compact);
}
.leading-copy {
  line-height: var(--zw-leading-copy);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "lineHeights": {
        "compact": "1.25",
        "copy": "1.65"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-leading": true,
      "wind-demo-label": true
    },
    "safelist": {
      "docs-preview": [
        "leading-compact",
        "leading-copy"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-leading { color: #223247; border: 1px solid #b7c5d4; padding: 1rem; }
.wind-demo-leading > div + div { margin-top: 1rem; border-top: 1px solid #d8e0e8; padding-top: 0.75rem; }
.wind-demo-leading p { margin: 0.35rem 0 0; }
.wind-demo-label { color: #5d6c7c; font-size: 0.8rem; }

任意の倍率を指定する

leading-[1.8] は名前付きトークンを増やさずに、このブロックの行間を広げます。

任意の倍率を指定する
HTML
<p class="wind-demo-leading-custom leading-[1.8]">A custom ratio can open the lines when a short block needs more air. / 短い文章では行間を広げると読みやすくなることがあります。</p>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-leading-compact: 1.25;
    --zw-leading-copy: 1.65;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-leading-custom {
  color: #223247;
  border-left: 3px solid #6d7f96;
  padding: .5rem .75rem;
}
.leading-\[1\.8\] {
  line-height: 1.8;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "lineHeights": {
        "compact": "1.25",
        "copy": "1.65"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-leading-custom": true
    },
    "safelist": {
      "docs-preview": [
        "leading-[1.8]"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-leading-custom { color: #223247; border-left: 3px solid #6d7f96; padding: 0.5rem 0.75rem; }

任意値と名前付きの値

役割に合わせた倍率には leading-copy のような名前を付けられます。leading-none は tokens.lineHeights.none があればその値を使い、なければ 1 にフォールバックします。角括弧には倍率や長さなど、検証済みの line-height 値を指定できます。行の高さは継承されるため、同じリズムを共有する最小のブロックに適用します。

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

カタログの詳細

leading

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
line-heightresolvednull

カタログの例

クラスの例期待される宣言
leading-[1.5]line-height: 1.5

Revision History

作成更新