CSSでフォームをきれいに整えよう｜入力欄とボタンのデザインをやさしく解説

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

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

今回はその続きとして、「フォーム（入力欄やボタン）」をCSSで整える方法を学んでいきます。

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

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

まずは基本の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あり
背景	白くてのっぺり	優しいグレーで清潔感アップ
入力欄	小さくて読みにくい	幅いっぱい＆余白で安心感
ボタン	無地のグレー	鮮やかなブルーで操作性◎