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

プリセット

設定

ライブプレビュー

アウトライン outline

CSSコード

フォーカスリング CSS（アクセシビリティ）
:focus-visible を使うとキーボード操作時のみフォーカスリングを表示できます（WCAG 2.4.11 推奨）。コントラスト比は隣接する色に対して最低 3:1 が必要です。
ポイント：outline はレイアウトに影響しません。border と異なり、周囲の要素をずらさずに要素の外側に描画されます。outline-offset で要素とアウトラインの間隔を調整できます。
フリーランス・個人事業主の方へ — 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会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。