zfb
GitHub リポジトリ

検索したい単語を入力

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

位置オフセット

余白値、分数、auto、full を使い、物理的な辺のオフセットを設定します。

inset で、余白値や分数を使い、位置指定された箱を包含ブロックのどの端に置くかを決めます。inset は4辺すべて、inset-x と inset-y はそれぞれ左右と上下、top/right/bottom/left は個別の端を指定します。

クラスと CSS の早見表

クラスの例期待される宣言
inset-4top: 1rem; right: 1rem; bottom: 1rem; left: 1rem;
inset-x-4left: 1rem; right: 1rem;
inset-y-4top: 1rem; bottom: 1rem;
top-0top: 0;
right-0right: 0;
bottom-0bottom: 0;
left-0left: 0;
-top-2top: -0.5rem;
left-nudgeleft: var(--zw-spacing-nudge);
例の設定

すべてのプレビューは spec 1、reset "none"、strict モード、spacingUnit "0.25rem"、ブレークポイントなしを明示した設定から始まります。数値の spacing はこの単位を掛けて解決し、Tailwind のテーマは継承しません。wind-demo クラスはデモ用の自作スタイルで、HTML と一緒に CSS を確認できます。

使い方の例

4辺に同じオフセットを設定

inset-4 は絶対配置された箱の4辺にそれぞれ 1rem の間隔を作ります。

4辺に同じオフセットを設定
HTML
<div class="wind-demo">
  <div class="wind-demo-frame relative w-72 h-36">
    <div class="absolute inset-4 wind-demo-highlight">Same offset on all four sides</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-highlight {
  background: #f2d794;
  color: #493810;
  border: 1px solid #b39761;
  text-align: center;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-4 {
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
}
.h-36 {
  height: 9rem;
}
.w-72 {
  width: 18rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-highlight": true
    },
    "safelist": {
      "docs-preview": [
        "absolute",
        "h-36",
        "inset-4",
        "relative",
        "w-72"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-highlight { background: #f2d794; color: #493810; border: 1px solid #b39761; text-align: center; }

2辺ずつ指定

inset-x-4 は左右、inset-y-4 は上下の端を動かします。

2辺ずつ指定
HTML
<div class="wind-demo">
  <div class="wind-demo-frame relative w-72 h-36">
    <div class="absolute inset-x-4 top-4 h-10 wind-demo-tile">Left and right inset</div>
    <div class="absolute inset-y-4 right-4 w-12 wind-demo-alt">Top and bottom inset</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-alt {
  border-color: #b39761;
  background: #efe5cb;
  color: #483a1d;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-x-4 {
  left: 1rem;
  right: 1rem;
}
.inset-y-4 {
  top: 1rem;
  bottom: 1rem;
}
.right-4 {
  right: 1rem;
}
.top-4 {
  top: 1rem;
}
.h-10 {
  height: 2.5rem;
}
.h-36 {
  height: 9rem;
}
.w-12 {
  width: 3rem;
}
.w-72 {
  width: 18rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-alt": true,
      "wind-demo-frame": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "absolute",
        "h-10",
        "h-36",
        "inset-x-4",
        "inset-y-4",
        "relative",
        "right-4",
        "top-4",
        "w-12",
        "w-72"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-alt { border-color: #b39761; background: #efe5cb; color: #483a1d; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

個別の角に配置

top-0、right-0、bottom-0、left-0 で各タイルを relative 枠の四隅に合わせます。

個別の角に配置
HTML
<div class="wind-demo">
  <div class="wind-demo-frame relative w-72 h-36">
    <div class="absolute top-0 left-0 size-8 wind-demo-tile">TL</div>
    <div class="absolute top-0 right-0 size-8 wind-demo-alt">TR</div>
    <div class="absolute bottom-0 left-0 size-8 wind-demo-alt">BL</div>
    <div class="absolute bottom-0 right-0 size-8 wind-demo-tile">BR</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-alt {
  border-color: #b39761;
  background: #efe5cb;
  color: #483a1d;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.bottom-0 {
  bottom: 0;
}
.left-0 {
  left: 0;
}
.right-0 {
  right: 0;
}
.top-0 {
  top: 0;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.h-36 {
  height: 9rem;
}
.w-72 {
  width: 18rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-alt": true,
      "wind-demo-frame": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "absolute",
        "bottom-0",
        "h-36",
        "left-0",
        "relative",
        "right-0",
        "size-8",
        "top-0",
        "w-72"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-alt { border-color: #b39761; background: #efe5cb; color: #483a1d; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

負の値と名前付きトークン

-top-2 は上へ 0.5rem 移動し、left-nudge は設定済みの tokens.spacing.nudge を使います。

負の値と名前付きトークン
HTML
<div class="wind-demo">
  <div class="wind-demo-frame relative w-72 h-36">
    <div class="absolute -top-2 left-nudge wind-demo-highlight">Negative top; named left token</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-nudge: 1rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-highlight {
  background: #f2d794;
  color: #493810;
  border: 1px solid #b39761;
  text-align: center;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.left-nudge {
  left: var(--zw-spacing-nudge);
}
.-top-2 {
  top: -0.5rem;
}
.h-36 {
  height: 9rem;
}
.w-72 {
  width: 18rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "nudge": "1rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-highlight": true
    },
    "safelist": {
      "docs-preview": [
        "-top-2",
        "absolute",
        "h-36",
        "left-nudge",
        "relative",
        "w-72"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-highlight { background: #f2d794; color: #493810; border: 1px solid #b39761; text-align: center; }

任意値と名前付きの値

数値オフセットは明示した spacingUnit 0.25rem を使い、4 は 1rem です。0、px、full、auto はトークン不要です。left-nudge のような名前付き値には tokens.spacing が必要です。top-[calc(100%_+_8px)] のような任意値も使えます。-top-2 のように負の値も指定できます。inset 自体は要素を位置指定しません。 left-1/2 のような分数は left: calc(100% * 1 / 2)、-top-1/2 は top: calc(calc(100% * 1 / 2) * -1) を出力します。左右のパーセンテージは包含ブロックの幅、上下は高さを基準にします。分子と分母はそれぞれ 1～1,000,000 の正の整数です。

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

カタログの詳細

inset

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

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
topresolvednull
rightresolvednull
bottomresolvednull
leftresolvednull

カタログの例

クラスの例期待される宣言
inset-0top: 0; right: 0; bottom: 0; left: 0

inset-x

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

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
leftresolvednull
rightresolvednull

カタログの例

クラスの例期待される宣言
inset-x-0left: 0; right: 0

inset-y

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

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
topresolvednull
bottomresolvednull

カタログの例

クラスの例期待される宣言
inset-y-0top: 0; bottom: 0

bottom

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

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
bottom-0bottom: 0

left

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

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
left-0left: 0

right

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

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
right-0right: 0

top

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

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
top-0top: 0

Revision History

作成更新