ボタンにフォーカスが当たった際に表示される点線（アウトライン）は、デフォルトでアクセシビリティのために表示されるもので、ユーザーがキーボード操作でボタンを操作できるように配慮されたものです。しかし、デザインによっては点線を非表示にしたい場合もあります。この場合、CSSでアウトラインを無効にすることで解決可能です。
点線（アウトライン）を消すためのCSS
フォーカス時の点線を非表示にするには、以下のCSSを使用します。
button:focus {
border: 0 !important;
outline: none !important;
}このコードを適用すると、ボタンがフォーカスされたときに点線やアウトラインが表示されなくなります。
アクセシビリティの観点からの注意点
点線を非表示にすることはビジュアル的にはすっきりしますが、アクセシビリティに影響が出る可能性があります。特に、キーボードやスクリーンリーダーを利用するユーザーが現在フォーカスされているボタンを視覚的に確認できなくなります。そのため、以下のような方法で代替的な視覚的なフィードバックを追加することが推奨されます。
推奨される代替スタイル
フォーカスが当たった時に背景色や影などでフィードバックを与える方法が効果的です。例：
button:focus {
outline: none;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}この例では、フォーカスが当たった際に青色の影を表示して視覚的なフィードバックを与えています。こうすることで、キーボード操作が必要なユーザーにとっても操作しやすくなります。
まとめ
ボタンの点線を消す際は、デザインの見栄えだけでなく、アクセシビリティの確保にも考慮したスタイル設定が必要です。必要に応じてフォーカス時のフィードバック方法をカスタマイズし、ユーザーに優しいデザインを目指しましょう。