アウトラインの幅とオフセット
長さでアウトラインの幅またはオフセットを設定します。負の値はオフセットのみ使えます。
アウトラインの太さと要素からの距離を指定します。
クラスと CSS の早見表
| クラスの例 | 期待される宣言 |
|---|---|
outline-2 | outline-width: 2px; outline-style: solid; |
outline-offset-4 | outline-offset: 4px; |
例の設定
共通プレビュー設定では spec 1、reset: "none"、strict モード、tokens.spacingUnit: "0.25rem"、ブレークポイントなしを明示しています。名前付きの値は各例で設定し、既定のパレットやテーマは継承しません。wind-demo クラスはデモ用の自作スタイルです。各例では、その CSS とユーティリティの宣言を分けて確認できます。
使い方の例
線と対象要素の間隔を調整する
outline-2 が 2px の線を描き、outline-offset-4 が 4px 離します。設定済みの色で境界を見分けやすくしています。
線と対象要素の間隔を調整する
HTML
<div class="wind-demo-outline bg-panel text-ink p-3 outline-2 outline-offset-4 outline-focus">Focus indicator · 2px line · 4px offset</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-outline {
display: inline-block;
margin: .8rem;
font: 14px / 1.5 system-ui, sans-serif;
}
.p-3 {
padding-top: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 0.75rem;
}
.text-ink {
color: var(--zw-color-ink);
}
.bg-panel {
background-color: var(--zw-color-panel);
}
.outline-2 {
outline-width: 2px;
outline-style: solid;
}
.outline-offset-4 {
outline-offset: 4px;
}
.outline-focus {
outline-color: var(--zw-color-focus);
}この例の設定
{
"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-outline": true
},
"safelist": {
"docs-preview": [
"bg-panel",
"outline-2",
"outline-focus",
"outline-offset-4",
"p-3",
"text-ink"
]
}
}
}デモ用の自作 CSS
.wind-demo-outline { display: inline-block; margin: 0.8rem; font: 14px/1.5 system-ui, sans-serif; }任意値と名前付きの値
outline-2 はピクセル幅を使い、幅とともに solid スタイルも設定します。角括弧には検証済み CSS 長さを指定できます。outline-offset-4 はアウトラインと要素の間を 4px 離します。offset は整数ピクセルまたは任意の長さを受け取り、負数も使えます。アウトラインはレイアウト上の場所を取りません。幅と offset は別のカタログ項目なので個別に調整できます。操作可能なコントロールではフォーカス表示を維持してください。
関連ガイド: ユーティリティの文法 · バリアント
カタログの詳細
outline
| フィールド | 値 |
|---|---|
| カタログ識別子 | v1.outline.width |
| クラスパターン | outline or outline-<suffix> |
| 文法 | {"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"outline-width","allowsFractionSlash":false,"allowsColorOpacity":false} |
| 受け入れる値 | 1 |
| トークンカテゴリ | トークンカテゴリなし |
| 負の値の規則 | forbidden |
| 競合グループと順位 | outline-width (30) |
| 並び順の順位 | 0 |
| セレクタの形 | ownElement |
| 仕様バージョン | 1 |
| 出力するプロパティ | outline-width, outline-style |
受け入れる値
| 種類 | 接尾辞 | 出力される値 |
|---|---|---|
exact | null | "1px" |
宣言テンプレート
| プロパティ | 値の種類 | 固定値 |
|---|---|---|
outline-width | resolved | null |
outline-style | fixed | "solid" |
カタログの例
| クラスの例 | 期待される宣言 |
|---|---|
outline-2 | outline-width: 2px; outline-style: solid |
outline-offset
| フィールド | 値 |
|---|---|
| カタログ識別子 | v1.outline.offset |
| クラスパターン | outline-offset-<suffix> |
| 文法 | {"acceptedKinds":["integer","arbitrary"],"arbitraryProperty":"outline-offset","allowsFractionSlash":false,"allowsColorOpacity":false} |
| 受け入れる値 | この項目には独立した値の定義がありません。 |
| トークンカテゴリ | トークンカテゴリなし |
| 負の値の規則 | allowed |
| 競合グループと順位 | outline-width (30) |
| 並び順の順位 | 1 |
| セレクタの形 | ownElement |
| 仕様バージョン | 1 |
| 出力するプロパティ | outline-offset |
受け入れる値
この項目には独立した値の定義がありません。
宣言テンプレート
| プロパティ | 値の種類 | 固定値 |
|---|---|---|
outline-offset | resolved | null |
カタログの例
| クラスの例 | 期待される宣言 |
|---|---|
outline-offset-2 | outline-offset: 2px |
Revision History
作成更新