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

こんにちは。おかゆです。
プログラミング学習の中で疑問に思ったことや理解が追いついていない部分について、自分なりに咀嚼して備忘録として記録しようと思い、ブログを始めることにしました。

英語で聞けばわかるけど話せない！とかね……。
いやいやいや、それって結局聞けてるつもりで、一言一句までは聞き取れてなくて雰囲気でわかったふりになってるだけでしょ！！と気づいて教科書の基本に戻って読み解いてみると、その次からはちゃんと聞き取れるようになったのと同じように、コードも見ればわかるけど、いざゼロから作ろうと思うとどこから手をつけたら良いんだ…？となってしまうのは、やはり一度立ち止まって基本を確認して分解して理解していく勉強法が私には向いているのではと思う。

というわけで、基本から。

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

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

最初の状態。ひとまずlabel要素とinput、textarea要素を書き出したところ。

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

ブラウザだとこんな感じ。 f:id:okayu_331:20200728222414p:plain

labelもinputもtextareaもインライン要素だから全部横並びになってしまった。
これを項目ごとに区切って並べたい！


以下、目標１の「ラベルが入力部品の上で、全体が左寄せ」の結果。 f:id:okayu_331:20200802114043p: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;
  flex-direction: column;
}

input[type="text"] {
  padding: 5px;
  width: 300px;
}

textarea {
  height: 200px;
  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;
}

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

  • ラベルと入力部品をひとつのかたまりと見てdivで囲むと、ラベルと入力部品の配置の調整がしやすい。今回はスタイリング用にと思ってdivで囲んだが、意味合い的には入力"項目"なのでliで囲んでも良さそう。
  • input type="submit" はボタンの形のスタイルが当てられている。
    • box-sizingプロパティの初期値はcontent-boxだけど、input type="submit"はborder-boxになっている。
    • font-familyプロパティ、font-sizeプロパティ等継承しないプロパティがある。
  • border-radiuseプロパティは100vhを指定すると角丸になる。50%だと縦にも横にも50%の扱いで楕円になる。
  • 全体のサイズ（hight, width）や配色、font-familyは実際に必要になった場面に合わせて調整。
  • border-boxを全要素に設定したけど、実際はリセットCSSで設定されるはず。されなかったら個別に設定する。


長くなったので目標の２、３はまた次回。