ダッシュで奪取

元SIerだけどWebエンジニアになりたい!

【CSS】お問い合わせフォームを作った

inputとtextareaでしょう?楽勝!!って思ってたらめちゃくちゃ詰まってしまったのでメモです。
苦手意識が消えません。何度もやって慣れるしかない…

作ったものは↓です。
サンプルページ

目次

  1. 骨組みを作る
  2. ラベルの整形
  3. 入力項目の整形
  4. ボタンの整形
  5. 見出しの整形
  6. スマホ対応
  7. 全体像
  8. 参考サイト
  9. 今日の日記

1. 骨組みを作る

素のHTMLで骨組みを作ります。

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/style.css" />
    <title>お問い合わせフォーム</title>
  </head>
  <body>
    <div class="main">
      <h1>お問い合わせフォーム</h1>
      <form name="form">
        <label for="name">名前</label>
        <input type="text" name="name" class="input-item" size="100" />
        <label for="email">メールアドレス</label>
        <input type="email" name="email" class="input-item" size="100" />
        <label for="message">お問い合わせ内容</label>
        <textarea
          name="message"
          class="input-item"
          placeholder="お問い合わせ内容"
        ></textarea>
        <input type="submit" class="button" value="送信" />
      </form>
    </div>
  </body>
</html>

css

@charset 'UTF-8';

body {
  margin: 5px;
  padding: 0;
}

.main {
  width: 800px;
  margin: auto;
}

意気揚々とプレビューしてみたら、なんだかすごいことに…

f:id:kyoruni:20190627190836p:plain

ものすごい回り込み方をしているので、とりあえず各入力項目ごとにdivで囲んでみます。
クラス名は「section」にしました。

html

<form name="form">
  <div class="section">
    <label for="name">名前</label>
    <input type="text" name="name" class="input-item" size="100" />
  </div>

  <div class="section">
    <label for="email">メールアドレス</label>
    <input type="email" name="email" class="input-item" size="100" />
  </div>
  <div class="section">
    <label for="message">お問い合わせ内容</label>
    <textarea
      name="message"
      class="input-item"
      placeholder="お問い合わせ内容"
    ></textarea>
  </div>
  <div class="section">
    <input type="submit" class="button" value="送信" />
  </div>
</form>

ちょっとマシになりました。

f:id:kyoruni:20190627191921p:plain

2. ラベルの整形

  • ラベルと入力項目の幅を決める

ラベルの大きさがバラバラでひどいので、横幅を指定したいです。
何も考えず下記のように書いたのですが、なんだかうまくいかない…

css

/* ---------- ラベル ---------- */
label {
  width: 150px;
  margin: 0;
  padding-right: 5px;
}

/* ---------- 入力項目 ---------- */
.input-item {
  width: 600px;
}

f:id:kyoruni:20190627194918p:plain

インライン要素には「置換要素」「非置換要素」があり、inputは置換要素・labelは非置換要素に分類されるようです。

  • 置換要素 ・・・ input、img、select等
  • 非置換要素・・・label、a等

置換要素は見た目上インラインブロックの働きをしているため、幅や高さが指定できるみたいです。
つまり、ラベルもインラインブロックにしてしまえば幅や高さが指定できるようになる…!

css

/* ---------- ラベル ---------- */
label {
  display: inline-block; /* 幅を指定するためインラインブロックにする */
  width: 150px;
  margin: 0;
  padding-right: 5px; /* ラベルと入力項目の間の余白を取る */
  text-align: right; /* ラベルを右寄せにする */
  color: #393b3e;
}

f:id:kyoruni:20190627195802p:plain

これでラベルにも固定幅が指定できました!ついでに右寄せにしました。

3. 入力項目の整形

  • 各入力項目がみっちり詰まっていたので、余白を作る
  • 本文入力エリアの高さを固定にする
  • 各入力項目の枠線に色(灰色)を付ける、線の幅も決める

css

/* ---------- 入力項目 ---------- */
.section {
  margin-bottom: 5px;
}

textarea {
  height: 70px;
}

.input-item {
  width: 600px;
  border: solid 1px #ccc;
  border-radius: 5px;
}

f:id:kyoruni:20190627200838p:plain

最初から気になっていたのですが、「お問い合わせ内容」ラベルの位置が下すぎるので修正します。 縦位置を指定するvertical-alignのプロパティを、textareaに指定します。

css

/* ---------- 入力項目 ---------- */
.section {
  margin-bottom: 5px;
}

textarea {
  height: 70px;
  vertical-align: top; /* 縦位置を上に指定 */
}

.input-item {
  width: 600px;
  border: solid 1px #ccc;
  border-radius: 5px;
}

f:id:kyoruni:20190627201609p:plain

いい感じになりました。

4. ボタンの整形

css

/* ---------- ボタン ---------- */
.button {
  font-weight: bold;
  display: block; /* ブロック要素にする */
  width: 300px;
  height: 30px;
  margin: auto; /* 中央寄せ */
  color: #fff;
  border-style: none; /* プロパティが反映されないため記述 */
  border-radius: 5px;
  background-color: #fd5f00;
}

.button:hover {
  transition: all 0.3s;
  background-color: #f90;
}

f:id:kyoruni:20190627202142p:plain

中央寄せにしたかったので、ブロック要素にしてからmargin:auto。

プロパティが反映されないので何故?となっていたのですが、border-styleを設定したら反映されました。
原因はよく分からないのですが、今はうまくいったからこのままにしておこう…その内ちゃんと調べます。

5. 見出しの整形

css

h1 {
  font-size: 20px;
  text-align: center;
  color: #005792;
}

f:id:kyoruni:20190627202735p:plain

今更ですが、見出しの部分が放置されていたので中央に寄せたりなどしました。

6. スマホ対応

スマホサイズで見るとすごいことになっているので、なんとかします。

f:id:kyoruni:20190627202958p:plain

css

.main {
  width: 800px;
  margin: auto;
}

@media screen and (max-width: 480px) {
  .main {
    width: 100%;
  }
}

スマホで見たとき、一番外側のmainのサイズをブラウザの100%の大きさにします。

f:id:kyoruni:20190627203243p:plain

横幅が100%になったので、横幅を基準にして中央寄せしている項目が戻ってきました。

ラベルの整形

css

/* ---------- ラベル ---------- */
label {
  display: inline-block;
  width: 150px;
  margin: 0;
  padding-right: 5px;
  text-align: right;
  color: #393b3e;
}

@media screen and (max-width: 480px) {
  label {
    display: block;
    text-align: left;
  }
}

スマホで見たときはブロック要素にしてしまうことで、幅指定しなくても画面いっぱいに広がるようになります。
ブロック状態で右寄せだと見た目が変なので、左寄せに戻しています。

f:id:kyoruni:20190627203757p:plain

入力項目の整形

css

/* ---------- 入力項目 ---------- */
.section {
  margin-bottom: 5px;
}

textarea {
  height: 70px;
  vertical-align: top;
}

.input-item {
  width: 600px;
  border: solid 1px #ccc;
  border-radius: 5px;
}

@media screen and (max-width: 480px) {
  .input-item {
    width: 100%;
  }
}

入力項目の横幅も100%にして、スマホの画面内に収まるようにします。

f:id:kyoruni:20190627204231p:plain

いい感じ…と思ったら、「お問い合わせ内容」の入力項目がちょっとはみ出してしまいました。
色々検索して渡り歩いたところ、box-sizingプロパティを指定することでなんとかなりました。これも後日調べます…

css

.input-item {
  box-sizing: border-box; /* スマホのときはみ出るの防止 */
  width: 600px;
  border: solid 1px #ccc;
  border-radius: 5px;
}

@media screen and (max-width: 480px) {
  .input-item {
    width: 100%;
  }
}

f:id:kyoruni:20190627204533p:plain

ボタンの整形

css

/* SafariだとボタンのCSSが当たっていないので、リセットする */
input[type="submit"] {
 -webkit-appearance: none;
}

/* ---------- ボタン ---------- */
.button {
  font-weight: bold;
  display: block;
  width: 300px;
  height: 30px;
  margin: auto;
  color: #fff;
  border-style: none;
  border-radius: 5px;
  background-color: #fd5f00;
}

.button:hover {
  transition: all 0.3s;
  background-color: #f90;
}

@media screen and (max-width: 480px) {
  .button {
    width: 100%;
  }
}

f:id:kyoruni:20190627204814p:plain

スマホだと、ボタンが横いっぱいに広がっていることが多い気がしたのでそれに習いました。
また、手持ちのiPhoneで確認したところボタンのCSSが当たっていなかったため、プロパティリセットの記述を追加しました。

JavaScriptで遊ぶためにフォームが欲しかっただけなので、簡素ですがこれで完成にします。

7. 全体像

*html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/style.css" />
    <title>お問い合わせフォーム</title>
  </head>
  <body>
    <div class="main">
      <h1>お問い合わせフォーム</h1>
      <form name="form">
        <div class="section">
          <label for="name">名前</label>
          <input type="text" name="name" class="input-item" size="100" />
        </div>

        <div class="section">
          <label for="email">メールアドレス</label>
          <input type="email" name="email" class="input-item" size="100" />
        </div>
        <div class="section">
          <label for="message">お問い合わせ内容</label>
          <textarea
            name="message"
            class="input-item"
            placeholder="お問い合わせ内容"
          ></textarea>
        </div>
        <div class="section">
          <input type="submit" class="button" value="送信" />
        </div>
      </form>
    </div>
  </body>
</html>

css

@charset 'UTF-8';

body {
  margin: 5px;
  padding: 0;
}

h1 {
  font-size: 20px;
  text-align: center;
  color: #005792;
}

.main {
  width: 800px;
  margin: auto;
}

@media screen and (max-width: 480px) {
  .main {
    width: 100%;
  }
}

input[type="submit"] {
 -webkit-appearance: none;
}

/* ---------- ラベル ---------- */
label {
  display: inline-block;
  width: 150px;
  margin: 0;
  padding-right: 5px;
  text-align: right;
  color: #393b3e;
}

@media screen and (max-width: 480px) {
  label {
    display: block;
    text-align: left;
  }
}

/* ---------- 入力項目 ---------- */
.section {
  margin-bottom: 5px;
}

textarea {
  height: 70px;
  vertical-align: top;
}

.input-item {
  box-sizing: border-box;
  width: 600px;
  border: solid 1px #ccc;
  border-radius: 5px;
}

@media screen and (max-width: 480px) {
  .input-item {
    width: 100%;
  }
}

/* ---------- ボタン ---------- */
.button {
  font-weight: bold;
  display: block;
  width: 300px;
  height: 30px;
  margin: auto;
  color: #fff;
  border-style: none;
  border-radius: 5px;
  background-color: #fd5f00;
}

.button:hover {
  transition: all 0.3s;
  background-color: #f90;
}

@media screen and (max-width: 480px) {
  .button {
    width: 100%;
  }
}

8. 参考サイト

9. 今日の日記

適当に書いていたら反映されない!キーッ!となることが多かったので、ブロック要素とかインライン要素とか、よく意識しながら書いていかないとだめだな…と痛感しました。初歩的な内容すぎて、ネットの海からピンポイントな情報を探してくるのにいちいち時間がかかってしまいました。戒めの意味も込めて、無駄に長い記事に…

メモ
  • フォームの中身の項目は囲む
  • インライン要素には、幅指定できるものとできないものがある
  • ↑指定できなければ、ブロック要素を持たせてあげれば良い
  • スマホ対応したいときは、メディアクエリを使う