zfb
GitHub リポジトリ

検索したい単語を入力

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

区切り線の幅

後続の表示対象の兄弟要素に、軸に沿った実線のボーダー幅を設定します。

後続する表示中の直下の子要素に solid ボーダーを付け、グループ内を区切ります。

クラスと CSS の早見表

クラスの例期待される宣言
divide-x-3border-left-width: 3px; border-left-style: solid;
divide-y-2border-top-width: 2px; border-top-style: solid;
例の設定

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

使い方の例

縦に並ぶ子要素を区切る

divide-y-2 は後続する表示中の子に 2px の上線を付けます。hidden の子はソースに残りますが、セレクターから除外されます。

縦に並ぶ子要素を区切る
HTML
<ul class="wind-demo-vertical-list divide-y-2"><li class="wind-demo-item">Visible item A</li><li class="wind-demo-item" hidden>Hidden child in the source</li><li class="wind-demo-item">Visible item B</li><li class="wind-demo-item">Visible item C</li></ul>
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-vertical-list {
  max-width: 27rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #16324f;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-item {
  padding: .7rem .2rem;
}
.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 2px;
  border-top-style: solid;
}
この例の設定
{
  "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-item": true,
      "wind-demo-vertical-list": true
    },
    "safelist": {
      "docs-preview": [
        "divide-y-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-vertical-list { max-width: 27rem; margin: 0; padding: 0; list-style: none; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-item { padding: 0.7rem 0.2rem; }

横並びの子要素を区切る

divide-x-3 は後続する直下の子に 3px の左線を付けます。最初の子には線がありません。

横並びの子要素を区切る
HTML
<div class="wind-demo-horizontal divide-x-3"><div class="wind-demo-item">First</div><div class="wind-demo-item">Second</div><div class="wind-demo-item">Third</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-horizontal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 30rem;
  color: #16324f;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-item {
  padding: .7rem .8rem;
}
.divide-x-3 > :not([hidden]) ~ :not([hidden]) {
  border-left-width: 3px;
  border-left-style: solid;
}
この例の設定
{
  "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-horizontal": true,
      "wind-demo-item": true
    },
    "safelist": {
      "docs-preview": [
        "divide-x-3"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-horizontal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 30rem; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-item { padding: 0.7rem 0.8rem; }

任意値と名前付きの値

divide-y は後続する表示中の兄弟に上ボーダー、divide-x は左ボーダーを付けます。どちらも物理辺を使い、引数なしでは 1px、整数ではピクセル幅、角括弧では検証済み長さを指定できます。対象辺のスタイルは solid になります。最初の表示中の子には線を付けません。hidden 属性のある要素は表示中の子の間にあっても除外されます。hidden がなく display:none だけの要素はセレクターに残ります。reverse フラグはありません。

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

カタログの詳細

divide-x

フィールド値
カタログ識別子v1.divide.width.x
クラスパターンdivide-x or divide-x-<suffix>
文法{"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"border-left-width","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位divide-width (28)
並び順の順位0
セレクタの形laterVisibleSiblings
仕様バージョン1
出力するプロパティborder-left-width, border-left-style

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
border-left-widthresolvednull
border-left-stylefixed"solid"

カタログの例

クラスの例期待される宣言
divide-xborder-left-width: 1px; border-left-style: solid

divide-y

フィールド値
カタログ識別子v1.divide.width.y
クラスパターンdivide-y or divide-y-<suffix>
文法{"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"border-top-width","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位divide-width (28)
並び順の順位0
セレクタの形laterVisibleSiblings
仕様バージョン1
出力するプロパティborder-top-width, border-top-style

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
border-top-widthresolvednull
border-top-stylefixed"solid"

カタログの例

クラスの例期待される宣言
divide-yborder-top-width: 1px; border-top-style: solid

Revision History

作成更新