モバイルファーストのフォーム

CoddyのHTMLジャーニー「Practical Frontend」セクションの一部 — レッスン 10/35。

フォームはウェブにおいて最も重要な要素の一つです。ユーザーは常に、入力やタップ、操作を行っています。モバイルファーストでフォームを設計する際、私たちは小さな画面でのユーザビリティに焦点を当てます。

ユーザーが入力やタップを簡単に行えるように、入力欄とボタンを大きくします。
フィールドを垂直に配置し、全幅の入力欄を使用します。
指で操作しやすいように、パディングと余白を追加します。

モバイル向けの例:

input, button {
  width: 100%;       /* 小さな画面では全幅にする */
  padding: 0.75rem;  /* タップしやすくする */
  font-size: 1rem;   /* 読みやすいテキスト */
}

次に、より大きな画面（タブレットやデスクトップ）向けに、レイアウトを強化します：

フォームをページの中央に配置します。
一部のフィールドを縦に並べるのではなく、横に並べて配置します。
見栄えを良くするために、幅と間隔を調整します。

大きな画面向けの例:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* 中央揃えにして幅を制限する */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* 入力を横並びにする */
  }
}

チャレンジ

簡単

基本的なHTMLフォームが与えられています。あなたのタスクは、モバイルファーストのスタイルを設定することです：

フォーム内の要素は垂直に積み重ねる必要があります。display: flex と flex-direction: column を使用し、見た目を良くするために gap を追加してください。
input、button、および textarea 要素に width: 100% を適用し、いくつかの padding を追加して、モバイル画面で十分な大きさになり、ユーザーがタップしやすくなるようにします。

チートシート

モバイルファーストでフォームを設計する際は、小さな画面での使いやすさに重点を置いてください：

ユーザーが簡単に入力やタップができるよう、インプットとボタンを大きくします
フィールドを垂直方向に積み重ね、全幅（full-width）のインプットを使用します
指で操作しやすいように、パディングと間隔を追加します

モバイルファーストのフォームスタイル：

input, button {
  width: 100%;       /* full width for small screens */
  padding: 0.75rem;  /* easier to tap */
  font-size: 1rem;   /* readable text */
}

大きな画面（タブレットやデスクトップ）の場合は、レイアウトを強化します：

ページの中央にフォームを配置します
一部のフィールドを積み重ねるのではなく、横並びに配置します
見た目を良くするために、幅と間隔を調整します

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* center and limit width */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* side-by-side inputs */
  }
}

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Forms</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f0f4f8;
    }

    form {
      
    }

    input, textarea, button {
      padding: 0.75rem;    
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      background-color: #4a90e2;
      color: white;
      border: none;
      cursor: pointer;
    }

    /* Larger screens */
    @media (min-width: 768px) {
      form {
        max-width: 600px;
        margin: 0 auto; /* center form */
      }

      .row {
        display: flex;
        gap: 1rem; /* side-by-side fields */
      }

      .row input {
        width: 100%; /* split space equally */
      }
    }
  </style>
</head>
<body>
   <h1>Contact Us</h1>
  <form>
    <div class="row">
      <input type="text" placeholder="Name" required>
      <input type="email" placeholder="Email" required>
    </div>
    <textarea placeholder="Your Message" rows="4" required></textarea>
    <button type="submit">Send</button>
  </form>
</body>
</html>