🔹 input:focus時の枠色変更
input要素がフォーカスされた際に、その枠線の色を変更することで、ユーザーインターフェイスを視覚的に強調することができます。
border は、要素の内部に含まれます。
影響範囲: 要素のサイズを実際に変更します。border は要素の領域を広げるため、レイアウトに影響を与える可能性があります。
調整方法: border は、border-width, border-color, border-style などで詳細に設定できます。
input:focus {
border-color: #3498db; /* フォーカス時に枠線の色を変更 */
}
また、input:focus で border-color を変更し、outline を削除する似たようなやり方もあります。
同じような動作をしつつも、使うプロパティに違いがあります。どちらもフォーカス時の枠線の色を変更するためのコードですが、border か outline のどちらを使うかという違いです。
💡 部分コード
input:focus {
outline-color: #4CAF50; /* フォーカス時の枠色 */
}
💻 完全動作コード（※このコピペのみでHTMLで動作するコード）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>input:focus時の枠色変更</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
</head>
<body>
<input type="text" placeholder="ここに入力">
<style>
input:focus {
outline-color: #4CAF50; /* フォーカス時の枠色 */
}
</style>
</body>
</html>
🎨 フォーカススタイルの実践的デザインテクニック
フォーム要素のフォーカススタイルは、ユーザビリティとアクセシビリティを向上させる重要な要素です。outline-colorを使ったスタイリングは、キーボード操作時の視認性を確保しつつ、デザインの一貫性を保つ効果的な方法です。
🌈 カラーデザインの最適化
#4CAF50（緑色）は標準的な選択ですが、サイトのカラースキームに合わせて調整可能です。例えば、#3498db（青色）は信頼感を、#ff7043（オレンジ色）は注意喚起を促す効果があります。コントラスト比4.5:1以上を保つことで、視覚障害のあるユーザーにも配慮できます。
✨ インタラクティブなフィードバック
transition: outline-color 0.3s easeを追加すると、色の変化を滑らかに表現できます。さらにbox-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3)を組み合わせると、より柔らかでモダンな印象になります。ただし、アニメーション効果は控えめにすることが大切です。
📱 レスポンシブデザイン対応
モバイルデバイスでは、タップターゲットを明確にするためoutline-widthを少し太く（3px程度）すると良いでしょう。また、ダークモード対応では@media (prefers-color-scheme: dark)を使って、明るめのアウトラインカラーを指定します。
フォーカススタイルはユーザー体験を大きく左右しますが、過度な装飾はかえって混乱を招く可能性があります。機能性とデザイン性のバランスを取りつつ、サイト全体で一貫したスタイルを適用することが重要です。