はじめに

自作したお問い合わせフォームを見たときに「なんだか入力欄が小さくて使いにくい」と感じたのがきっかけでした。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

実際に他の人からも「もっと広げた方が見やすいかも」と言われ、シンプルな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`
レスポンシブに対応させる	メディアクエリで調整可能

「使いやすいフォーム」は、ユーザーの信頼にもつながります。

見た目を整えるだけでなく、入力しやすさにも配慮したデザインを意識してみてください！