CSSアウトラインジェネレーター
CSS の outline と outline-offset を、太さ・スタイル・色・間隔つきで作成。ライブプレビューで確認しながら、アクセシブルなフォーカスリング用の :focus-visible ルールもすぐに使えます。CSS と HTML をコピーできます。
入力
プレビューと HTML スニペットにのみ使用されます。
要素の端と輪郭線の間の距離。負の値にすると輪郭線が内側に描画されます。
最近のブラウザでは、輪郭線も角丸に沿って描画されます。
キーボードフォーカスのときだけ適用します。フォーカスリングに推奨される方法です。
出力
アウトラインのついたボックスがここに表示されます。
outline 宣言
CSS
HTML
役に立ちましたか？
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-outline-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-outline-generator` tool (CSS Outline Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-outline-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSアウトラインジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
CSS の outline プロパティは、要素のサイズを変えず、周囲の要素も押し出さずに要素の周りに線を描画します。これが border との違いです。キーボードのフォーカスリングの基本となるプロパティです。このジェネレーターでは、幅・スタイル・色・outline-offset をライブプレビューで調整し、CSS をコピーできます。
使い方
- 幅・スタイル・色を設定します。 8 種類のスタイルから選べます: solid、dashed、dotted、double、groove、ridge、inset、outset。
- オフセットを調整します。
outline-offsetは要素と線の間の距離を決めます。負の値にすると、輪郭線が要素の端の内側に描画されます。 - 角丸の半径を選びます。 最近のブラウザでは、輪郭線が角丸に沿って描画されます。
- 「:focus-visible のときのみ表示」をオンにします。 キーボードでフォーカスしたときだけ適用されるルールになります。フォーカスリングに推奨されるパターンです。
- 出力をコピーします: 宣言、完全な CSS ルール、対応する HTML スニペット。
outline と border の違い
- outline はレイアウトの領域を占有しないため、変更してもページがずれることはありません。
- outline は要素から離して配置できますが、border はできません。
- outline は四辺とも同じ見た目になり、最近のブラウザでは
border-radiusに沿って描画されます。
アクセシビリティのヒント
- 目に見える代替手段なしに
outline: noneを書かないでください。キーボードユーザーはフォーカスリングを頼りにしています。 - outline の色と周囲の背景の間で、コントラスト比 3:1 を目指しましょう。
- 太さ 2〜3px、オフセット 2px の outline は、明確で広く使われている定番の設定です。
装飾的なフレームには CSS ボーダースタイルジェネレーター を、柔らかい光の効果には CSS ボックスシャドウジェネレーター をお試しください。
プライバシー
すべての処理はブラウザ内で行われます。設定がアップロードされることはありません。
outlineoutline-offsetfocus ringfocus-visiblecss outlineaccessibilityborder alternative