CSSの outline プロパティを即座に生成。スタイル・幅・色・オフセットをリアルタイムプレビューで調整し、コピーするだけで使えるCSSコードを取得できます。

プリセット

設定

<!-- outline-style -->
<div class="ot-control-group">
  <label for="ot-style">outline-style（スタイル）</label>
  <select id="ot-style">
    <option value="solid" selected>solid（実線）</option>
    <option value="dashed">dashed（破線）</option>
    <option value="dotted">dotted（点線）</option>
    <option value="double">double（二重線）</option>
    <option value="groove">groove（溝）</option>
    <option value="ridge">ridge（隆起）</option>
    <option value="inset">inset（内側）</option>
    <option value="outset">outset（外側）</option>
  </select>
</div>

<!-- outline-width -->
<div class="ot-control-group">
  <label for="ot-width">outline-width（幅）<span class="ot-val" id="ot-width-val">3px</span></label>
  <input type="range" id="ot-width" min="1" max="20" value="3" step="1">
</div>

<!-- outline-color -->
<div class="ot-control-group">
  <label for="ot-color">outline-color（色）</label>
  <div class="ot-color-row">
    <input type="color" id="ot-color" value="#4f46e5">
    <input type="text" class="ot-hex-input" id="ot-hex" value="#4f46e5" maxlength="9" spellcheck="false">
  </div>
</div>

<!-- outline-offset -->
<div class="ot-control-group">
  <label for="ot-offset">outline-offset（間隔）<span class="ot-val" id="ot-offset-val">3px</span></label>
  <input type="range" id="ot-offset" min="-20" max="20" value="3" step="1">
</div>

<!-- compare with border toggle -->
<label class="ot-toggle-row">
  <span class="ot-toggle">
    <input type="checkbox" id="ot-compare">
    <span class="ot-toggle-track"></span>
    <span class="ot-toggle-thumb"></span>
  </span>
  border と並べて比較
</label>

<!-- focus state toggle -->
<label class="ot-toggle-row">
  <span class="ot-toggle">
    <input type="checkbox" id="ot-focus-mode">
    <span class="ot-toggle-track"></span>
    <span class="ot-toggle-thumb"></span>
  </span>
  フォーカス状態をプレビュー
</label>

<!-- Preview -->
<div class="ot-preview-wrap">
  <p class="ot-section-title">ライブプレビュー</p>
  <div class="ot-preview-stage" id="ot-stage">
    <div>
      <div class="ot-preview-box" id="ot-box-outline">
        アウトライン
        <span class="ot-label">outline</span>
      </div>
    </div>
    <div id="ot-border-col" style="display:none">
      <div class="ot-preview-box" id="ot-box-border">
        ボーダー
        <span class="ot-label">border</span>
      </div>
    </div>
    <div id="ot-focus-col" style="display:none" class="ot-focus-demo">
      <button class="ot-focus-btn" id="ot-focus-btn">フォーカスする</button>
      <span class="ot-focus-label">Tabキーでフォーカス</span>
    </div>
  </div>
</div>

<!-- CSS Output -->
<div class="ot-output-wrap">
  <div class="ot-output-header">
    <p class="ot-section-title" style="margin:0">CSSコード</p>
    <button class="ot-copy-btn" id="ot-copy-btn">
      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <rect x="5" y="5" width="9" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
        <path d="M3 11H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      </svg>
      CSSをコピー
    </button>
  </div>
  <pre class="ot-code" id="ot-code-out"></pre>
</div>

<!-- Accessibility / Focus State Output -->
<div class="ot-a11y-wrap" id="ot-a11y-wrap">
  <div class="ot-output-header">
    <p class="ot-section-title" style="margin:0">フォーカスリング CSS（アクセシビリティ）</p>
    <button class="ot-copy-btn" id="ot-copy-a11y-btn">
      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <rect x="5" y="5" width="9" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
        <path d="M3 11H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      </svg>
      コピー
    </button>
  </div>
  <p class="ot-a11y-note"><code>:focus-visible</code> を使うとキーボード操作時のみフォーカスリングを表示できます（WCAG 2.4.11 推奨）。コントラスト比は隣接する色に対して最低 3:1 が必要です。</p>
  <pre class="ot-code-a11y" id="ot-a11y-out"></pre>
</div>

<div class="ot-info">
  <strong>ポイント：</strong><code>outline</code> はレイアウトに影響しません。<code>border</code> と異なり、周囲の要素をずらさずに要素の外側に描画されます。<code>outline-offset</code> で要素とアウトラインの間隔を調整できます。
</div>

フリーランス・個人事業主の方へ — freee 会計で確定申告をかんたんに

Web制作・デザイン案件の収支管理から確定申告まで、freee なら自動仕訳と青色申告書類の自動作成でスムーズに完結します。初年度無料プランあり。

freee を無料で試す

使い方

  1. outline-style のドロップダウンでスタイルを選択（solid・dashed・dotted・double など）。
  2. outline-width スライダーで太さを 1〜20px の範囲で調整。
  3. outline-color のカラーピッカーまたは HEX 入力欄で色を設定。
  4. outline-offset で要素とアウトラインの間隔をマイナス値（内側）〜20px の範囲で調整。
  5. border と並べて比較 を ON にすると、レイアウトへの影響の違いを並べて確認できます。
  6. フォーカス状態をプレビュー を ON にするとボタンにアウトラインが適用され、フォーカスリングの見た目を確認できます。
  7. CSSをコピー ボタンでコードをクリップボードにコピーして完了。

outline と border の違い

プロパティレイアウトに影響border-radius に追従オフセット指定
outlineなし部分的あり（outline-offset）
borderありありなし

outline はレイアウトをずらさないため、フォーカスインジケーターに最適です。コンテンツの折り返しや余白への影響なしに、要素の外側にリングを描画できます。

アクセシビリティのポイント

  • WCAG 2.4.11（WCAG 2.2 AA 基準）では、フォーカスインジケーターが隣接する色に対して最低 3:1 のコントラスト比を持つことが求められます。
  • outline: none を指定する場合は、必ず代替のフォーカス表示を提供してください。
  • :focus-visible を使うと、マウス操作ではなくキーボード操作時のみフォーカスリングを表示できます。
  • outline-offset: 2〜4px を設定すると、角丸要素でも視認性が向上します。

関連ツール

※ freee へのリンクはアフィリエイトリンクを含む場合があります。

本ページにはアフィリエイト広告（A8.net）が含まれています。

確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。