CSS入力欄テンプレート：border-radiusとpaddingで装飾を追加
📝 使用用途
このテンプレートは、入力欄にボーダーの丸み（`border-radius`）とパディング（`padding`）を追加するために使用します。
📘 解説
このコードでは、`border-radius` と `padding` を使って、入力欄をスタイリングしています。`border-radius` によって角を丸くし、`padding` によって内側の余白を調整しています。さらに、`input:focus` によって、入力欄がフォーカスされた際の枠線の色を変更しています。
outlineは、要素の外側に表示されます。border とは異なり、要素のサイズには影響しません。
影響範囲: outline は、主に視覚的な効果として使われます。outline が表示されても、要素の周りのスペースは変わりません。
調整方法: outline は、outline-width, outline-color, outline-style などで設定できます。
input:focus {
outline-color: #3498db; /* フォーカス時にアウトラインの色を変更 */
outline: none; /* アウトラインを削除する場合 */
}
また、 input:focus で outline-color を変更する方法もあります。
🔹 部分コード
<style>
/* 入力欄の装飾 */
input {
border-radius: 8px; /* 角を丸くする */
padding: 10px 15px; /* 内側の余白 */
font-size: 16px; /* フォントサイズ */
border: 2px solid #ccc; /* 枠線 */
transition: all 0.3s ease;
}
/* フォーカス時のスタイル */
input:focus {
border-color: #3498db; /* フォーカス時の枠線の色 */
outline: none; /* フォーカス時のアウトラインを削除 */
}
</style>
💻 完全動作コード
<input type="text" placeholder="名前を入力" />
<style>
/* 入力欄の装飾 */
input {
border-radius: 8px; /* 角を丸くする */
padding: 10px 15px; /* 内側の余白 */
font-size: 16px; /* フォントサイズ */
border: 2px solid #ccc; /* 枠線 */
transition: all 0.3s ease;
}
/* フォーカス時のスタイル */
input:focus {
border-color: #3498db; /* フォーカス時の枠線の色 */
outline: none; /* フォーカス時のアウトラインを削除 */
}
</style>
🎨 入力欄デザインの実践テクニック
入力欄のスタイリングはユーザー体験に直接影響する重要な要素です。border-radiusとpaddingを適切に組み合わせることで、使いやすく美しいフォームを作成できます。
📏 最適なサイジングのポイント
padding: 10px 15pxは標準的なサイズですが、モバイルデバイスではpadding: 12px 16pxに増やすとタップしやすくなります。border-radiusの値は4pxから12pxの間が適切で、サイトのデザインスタイルに合わせて調整しましょう。
🌈 カラーデザインのバリエーション
フォーカス時のborder-colorは#3498db（青）の他、#4CAF50（緑）や#FF7043（オレンジ）など、サイトのカラーテーマに合わせて変更可能です。ダークモード対応には@media (prefers-color-scheme: dark)を使って、明るめのボーダーカラーを指定します。
✨ インタラクションの強化
transitionプロパティにbox-shadowを追加し、input:focus時にbox-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3)を設定すると、より目立つフォーカス効果が得られます。ただし、アニメーションは控えめにすることが重要です。
入力欄のデザインは機能性を最優先に、サイト全体のデザインシステムと調和するように調整しましょう。特にフォームが長いページでは、一貫したスタイルを保つことがユーザビリティ向上につながります。