はじめに
Webサイトにフォームを設置する際、「入力欄が狭い」「ボタンが小さくて押しにくい」といった使いにくさを感じることがあります。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
今回は、フォーム全体を見やすく整えるためのCSSスタイリング方法をご紹介します。
書こうと思ったきっかけ
実際にお問い合わせフォームを作成していたとき、フォームの幅が狭く、中央に揃っていなかったために見た目のバランスが悪いと感じたことがきっかけです。
また、ボタンが素っ気なくてタップしにくかったため、見た目と操作性を同時に改善したいと思い、CSSを調整しました。
内容について（実装のポイント）
※ 以下はあくまで個人の備忘録としてまとめた内容です。
フォームを中央揃えにする
form {
max-width: 800px;
margin: 0 auto;
}
- 最大幅を800pxに制限
-
margin: 0 auto;で左右中央に配置
入力欄とテキストエリアを幅いっぱいに広げる
input[type="text"],
input[type="email"],
textarea {
width: 100%;
max-width: 100%;
padding: 10px;
font-size: 16px;
box-sizing: border-box;
}
- 入力欄を親要素の幅に合わせて広げる
-
box-sizing: border-box;により、パディングを含めてちょうど100%の幅になるように調整 - フォントサイズとパディングで可読性・操作性を向上
ボタンのデザインとホバー効果
button {
background-color: #3d843d;
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #ff9800;
}
- 背景色をブランドカラー（例：#3d843d）に指定
- 角丸のスタイルで柔らかく、親しみやすい印象に
- ホバー時に背景色をオレンジに変化させ、操作の反応を視覚的に伝える
- トランジション効果でアニメーションが滑らかに
おわりに
フォームはユーザーとの大切な接点です。使いやすさとデザイン性のバランスが重要になります。
今回紹介したようなスタイリングを取り入れることで、見た目にも美しく、操作しやすいフォームを実現できます。
必要に応じてレスポンシブ対応やバリデーションの見た目改善もあわせて行っていくと、より信頼感のあるサイトになるので試してみてください！