zfb
GitHub リポジトリ

検索したい単語を入力

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

アウトラインスタイル

none を含む、対応するアウトラインの線種を選びます。

対応するアウトラインの線種を選びます。アウトラインを消す指定もあります。

クラスと CSS の早見表

クラスの例期待される宣言
outline-dashedoutline-style: dashed;
outline-dottedoutline-style: dotted;
outline-doubleoutline-style: double;
outline-noneoutline-style: none;
outline-solidoutline-style: solid;
例の設定

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

使い方の例

アウトラインのパターンを比べる

各タイルでは幅、距離、設定済みの色と一つの線種を組み合わせます。none の例は枠線を残し、アウトライン自体が消えることを示します。

アウトラインのパターンを比べる
HTML
<div class="wind-demo-outline-grid"><div class="wind-demo-outline-box border-2 border-focus p-2 outline-2 outline-offset-2 outline-focus outline-solid">solid</div><div class="wind-demo-outline-box border-2 border-focus p-2 outline-2 outline-offset-2 outline-focus outline-dashed">dashed</div><div class="wind-demo-outline-box border-2 border-focus p-2 outline-2 outline-offset-2 outline-focus outline-dotted">dotted</div><div class="wind-demo-outline-box border-2 border-focus p-2 outline-2 outline-offset-2 outline-focus outline-double">double</div><div class="wind-demo-outline-box border-2 border-focus p-2 outline-2 outline-offset-2 outline-focus outline-none">none · border remains</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-outline-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  max-width: 32rem;
  padding: .8rem;
  color: #16324f;
  font: 13px / 1.4 system-ui, sans-serif;
}

.wind-demo-outline-box {
  display: inline-block;
  margin: .25rem;
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.border-2 {
  border-top-width: 2px;
  border-top-style: solid;
  border-right-width: 2px;
  border-right-style: solid;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-left-width: 2px;
  border-left-style: solid;
}
.border-focus {
  border-top-color: var(--zw-color-focus);
  border-right-color: var(--zw-color-focus);
  border-bottom-color: var(--zw-color-focus);
  border-left-color: var(--zw-color-focus);
}
.outline-2 {
  outline-width: 2px;
  outline-style: solid;
}
.outline-offset-2 {
  outline-offset: 2px;
}
.outline-focus {
  outline-color: var(--zw-color-focus);
}
.outline-dashed {
  outline-style: dashed;
}
.outline-dotted {
  outline-style: dotted;
}
.outline-double {
  outline-style: double;
}
.outline-none {
  outline-style: none;
}
.outline-solid {
  outline-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-outline-box": true,
      "wind-demo-outline-grid": true
    },
    "safelist": {
      "docs-preview": [
        "border-2",
        "border-focus",
        "outline-2",
        "outline-dashed",
        "outline-dotted",
        "outline-double",
        "outline-focus",
        "outline-none",
        "outline-offset-2",
        "outline-solid",
        "p-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-outline-grid { display: flex; flex-wrap: wrap; gap: 1.2rem; max-width: 32rem; padding: 0.8rem; color: #16324f; font: 13px/1.4 system-ui, sans-serif; }
.wind-demo-outline-box { display: inline-block; margin: 0.25rem; }

任意値と名前付きの値

outline-solid、outline-dashed、outline-dotted、outline-double、outline-none は完全一致のクラスで outline-style を設定します。幅と色は含まれないため、見える線には幅と色のユーティリティも組み合わせます。outline-none はアウトラインを完全に削除します。使う場合は、明確な別のフォーカス表示を用意してください。カタログには Tailwind の outline-hidden は含まれません。

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

カタログの詳細

outline-dashed

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
outline-dashedoutline-style: dashed

outline-dotted

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
outline-dottedoutline-style: dotted

outline-double

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
outline-doubleoutline-style: double

outline-none

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
outline-noneoutline-style: none

outline-solid

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
outline-solidoutline-style: solid

Revision History

作成更新