HTMLフォームの作り方③｜CSSで入力欄とボタンを整える基本

こんにちは！駆け出しエンジニアのまるです👓🦍

前回の記事では、
CSSを別ファイルにまとめて書く「外部CSS」の使い方を紹介しましたね。

今回はその続きとして、
HTMLフォームをCSSでデザインする方法を学んでいきます。

デザインを整えるだけで、
フォームはぐっと見やすく・使いやすくなります。

これができるようになると、
お問い合わせページやログインフォームなど、
実際のWebサイトで使われるフォームが作れるようになりますよ💡

まずは基本のHTMLフォームを確認しよう
CSSでフォームを整えてみよう
見た目の変化を比べてみよう
まとめ｜フォームデザインの基本ポイント

まずは基本のHTMLフォームを確認しよう

はじめに、
まだCSSを使っていない「素のフォーム」を見てみましょう

<form>
  <label for="name">お名前：</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="message">メッセージ：</label><br>
  <textarea id="message" name="message" rows="5" cols="30"></textarea><br><br>

  <input type="submit" value="送信">
</form>

白背景・小さい文字・詰まった間隔…。
動くけど、ちょっと味気ない印象ですよね。

CSSでフォームを整えてみよう

では次に、
外部CSSファイル（style.css）にスタイルを追加してみましょう👇

※外部CSSの読み込み方法は、前回の記事を参考にしてください💡

/* 全体の基本デザイン */
body {
    background-color: #f7f9fc;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.8;
    padding: 40px;
  }
  
  /* フォームの枠 */
  form {
    background-color: #fff;
    max-width: 400px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  
  /* ラベルと入力欄 */
  label {
    display: block;
    margin-bottom: 6px;
    color: #333;
    font-weight: bold;
  }
  
  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
  }
  
  /* ボタン */
  input[type="submit"] {
    display: block;
    margin: auto;
    background-color: #0d47a1;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
  }
  
  /* ボタンを押したとき */
  input[type="submit"]:active {
    background-color: #1565c0;
  }

見た目の変化を比べてみよう

CSSを加えるだけで、フォームはここまで変わります👇

比較	HTMLだけ	CSSあり
背景	白くてのっぺり	やさしいグレーで清潔感
入力欄	小さくて読みにくい	幅いっぱいで安心感
ボタン	無地のグレー	鮮やかなブルーで押しやすい