はじめに
自作したお問い合わせフォームを見たときに「なんだか入力欄が小さくて使いにくい」と感じたのがきっかけでした。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
実際に他の人からも「もっと広げた方が見やすいかも」と言われ、シンプルなHTMLでもCSSを工夫するだけでフォームの使いやすさがぐっと上がることを体感しました。
書こうと思ったきっかけ
Webサイトにお問い合わせフォームを設置したとき、「もっと入力欄を横に広げたい」「フォームが中央にあって狭く感じる…」と思ったことはありませんか？
今回は、ホンダ社労士事務所のような落ち着いたサイトを想定して、HTMLのフォームを横に広げて見やすく整える方法をご紹介します。
現在のHTML（シンプルなフォーム）
以下のようなフォームが用意されています：
<form action="#" method="post">
<label for="name">お名前：</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">メールアドレス：</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">お問い合わせ内容：</label><br>
<textarea id="message" name="message" rows="5" required></textarea><br><br>
<button type="submit">送信する</button>
</form>
このままだと、フォーム要素はブラウザの標準幅で表示され、横幅が短く感じてしまいます。
解決策：CSSで横幅を広げる
contact.css などのスタイルシートに以下のスタイルを追加しましょう：
/* フォーム全体の最大幅を指定し、中央揃え */
form {
max-width: 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;
}
/* 送信ボタンをスタイリッシュに */
button {
background-color: #ffa726;
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;
}
ポイント解説
-
form { max-width: 800px; margin: 0 auto; }- フォームの最大幅を800pxに制限し、中央に配置します。
-
width: 100%;+box-sizing: border-box;- パディングやボーダーの分を含めてちょうど100%になるため、横幅がはみ出すことがなくなります。
-
textareaも同様にwidth: 100%を指定することで、入力エリアが広くなり、書きやすくなります。 -
buttonはカラーや角丸を設定し、見た目を整えています。
完成イメージ
- フォーム全体がページ中央に
- 入力欄は横幅いっぱいに広がり、使いやすい
- スマートで信頼感のあるデザインに
応用編：さらに良くするには？
- ラベルと入力欄を横並びにして2カラムにする
- スマホ時は自動的に縦1列になるレスポンシブ対応
- 入力ミス時のバリデーション表示（「メールアドレスが正しくありません」など）
これらもCSSやJavaScriptで対応可能です。
まとめ
| 設定したいこと | CSSでの指定内容 |
|---|---|
| フォームを横に広げる |
max-width, margin: 0 auto
|
| 入力欄を広げる |
width: 100%, box-sizing: border-box
|
| レスポンシブに対応させる | メディアクエリで調整可能 |
「使いやすいフォーム」は、ユーザーの信頼にもつながります。
見た目を整えるだけでなく、入力しやすさにも配慮したデザインを意識してみてください！