フォームのスタイリング（２）

こんにちは。おかゆです。
フォームのスタイリング練習の続きです。 今回は、以下の２と３です。

目標：ベーシックなフォームのスタイリングが出来るようになる。
簡単なお問い合わせフォームを想定して、以下を配置する。
- お名前
- メールアドレス
- お問い合わせ内容
- 送信ボタン

ラベルと、入力部品の関係は、以下3パターン。
この配置についてはLuke Wroblewski氏の研究を参照（LukeW | Top, Right or Left Aligned Form Labels）
1. ラベルが入力部品の上で、全体が左寄せ 前回挑戦済！
2. ラベルと入力部品が横並びで、ラベルが右寄せ
3. ラベルと入力部品が横並びで、ラベルが左寄せ
いずれも送信ボタンは中央寄せ


以下、目標２の「ラベルと入力部品が横並びで、ラベルが右寄せ」の結果。 f:id:okayu_331:20200807210852p:plain

<body>
  <form action="" method="post">
    <div class="form_group">
      <label for="name">お名前</label>
      <input type="text" name="name" id="name">
    </div>
    <div class="form_group">
      <label for="email">メールアドレス</label>
      <input type="text" name="email" id="email">
    </div>
    <div class="form_group">
      <label for="message">お問い合わせ内容</label>
      <textarea name="message" id="message"></textarea>
    </div>
    <div class="form_group">
      <input type="submit" value="送信">
    </div>
  </form>
</body>

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.form_group {
  width: 500px;
  margin: 0 auto 15px;
display: flex;
}

label {
  width: 150px;
  text-align: right;
  padding-right: 15px;
}

input[type="text"] {
  padding: 5px;
  width: calc(100% - 150px);
}

textarea {
  height: 200px;
  width: calc(100% - 150px);
  padding: 5px;
}

input[type="submit"] {
  width: 400px;
  height: 50px;
  padding: 10px;
  margin: 0 auto;
  font-size: 16px;
  color: #fff;
  background-color: #F20C0C;
  border: none;
  border-radius: 100vh;
  cursor: pointer;
}

input[type="submit"]:hover {
  opacity: 0.8;
}


以下、目標３の「ラベルと入力部品が横並びで、ラベルが左寄せ」の結果。 f:id:okayu_331:20200807210858p:plain

<body>
  <form action="" method="post">
    <div class="form_group">
      <label for="name">お名前</label>
      <input type="text" name="name" id="name">
    </div>
    <div class="form_group">
      <label for="email">メールアドレス</label>
      <input type="text" name="email" id="email">
    </div>
    <div class="form_group">
      <label for="message">お問い合わせ内容</label>
      <textarea name="message" id="message"></textarea>
    </div>
    <div class="form_group">
      <input type="submit" value="送信">
    </div>
  </form>
</body>

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.form_group {
  width: 500px;
  margin: 0 auto 15px;
display: flex;
}

label {
  width: 150px;
  padding-right: 15px;
}

input[type="text"] {
  padding: 5px;
  width: calc(100% - 150px);
}

textarea {
  height: 200px;
  width: calc(100% - 150px);
  padding: 5px;
}

input[type="submit"] {
  width: 400px;
  height: 50px;
  padding: 10px;
  margin: 0 auto;
  font-size: 16px;
  color: #fff;
  background-color: #F20C0C;
  border: none;
  border-radius: 100vh;
  cursor: pointer;
}

input[type="submit"]:hover {
  opacity: 0.8;
}

わかったこと、考えたこと

  • 送信ボタンにカーソルが当たった時に少し色が薄くなるとクリックしやすいかな、と思いhover設定した。
  • どうやら、親要素をdisplay: flex;とすると、子要素のinline要素のアイテムはblock要素になるみたい。
  • 参考にした研究記事にもある通り、３はラベルと入力部品が離れている感じがして、入力しようと思うと「この入力欄で良かったかな？」とラベルに対応した入力部品の把握に時間がかかる印象。項目数にもよるが、表のように項目ごとに区切り線が入るとわかりやすくなりそう。


試している間にまた疑問も沸いたので、また試しながらまとめて投稿します！

（なんだか画像が大きいですね・・・今度サイズ調整します・・・）