\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > L_HTML/CSS > Step7 > デザインデータからコーディング！お問い合わせフォームを作ってみよう
デザインデータからコーディング！お問い合わせフォームを作ってみよう

デザインデータからコーディング！お問い合わせフォームを作ってみよう

2023/06/30

2024/02/28

デザインデータをもとにHTML, CSSのコーディングの練習をしてみましょう。

今回は「コンタクトフォーム」の見た目をHTMLとCSSで作成します。

この記事は「デザインデータからブログサイトを作ってみよう」の記事の続きになります。

アイキャッチ画像
デザインデータからコーディング！お問い合わせフォームを作ってみよう

 

この記事で身につく内容
  • 基本的なお問い合わせフォームの作り方　　　　　　　　　
  • お問い合わせフォームでよく使うinputタグの書き方

 

教材を開いて準備する

それでは、練習に入っていきましょう。前回の教材をそのまま使用します。

新たに教材のファイルをダウンロードしたい方は以下のボタンからダウンロードができます。（前回までのコードは記述済のものになります。）

Figmaのデザインデータはこちらからご確認いただけます。

ダウンロード

 

準備をしよう

ダウンロードしたら、以下の要領で準備しましょう。

  • ダウンロードしたファイルの確認
  • XD or Figmaで制作するデザインを確認する
    今回は「お問い合わせページ_SP」のアートボードを使っていきます。
  • VSCodeで編集するフォルダを開く
    今回は「contact.html」を編集していきます
  • ブラウザに表示する
  • 検証ツールを開きスマホサイズの表示にする

 

コーディングしてみよう

今回のページは画像が使われていないので、そのままコーディングの作業に移ります。

再度確認となりますが、コーディングを行う際は、いきなりコードを記述せず、サイトのデザインをよく確認することが大切です。

  1. デザインデータから構造を確認する
  2. HTMLでサイトの構造を記述する
  3. デザインデータからプロパティを確認する
  4. CSSでサイトのスタイルを記述する

上記の流れを意識して、実際にコーディングを行っていきます。

 

Google Fonts の読み込み


<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
 href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"
 rel="stylesheet"
/>

次に、前回同様に「Google Fonts」を用いてフォントの読み込みを行います。
contact.htmlのheadタグの中に上記のコードを記述しましょう。

index.htmlで記述したものと同じ内容になるので、実際に行うときにはindex.htmlからコピー&ペーストをします。

 

ヘッダーを作る

全体のスタイルは「ブログサイトのコーディング」の際に記述したので、ヘッダーから作っていきます。

 

デザインデータから構造を確認する

XD or Figma を用いてデザインデータの確認をしていきましょう。
index.htmlとcontact.htmlはヘッダーのデザインが共通していることに注目です。
今回のページでは、ヘッダーのサブテキストが「Contact」に変わっているだけになります。

※xdファイルが開けない場合、こちらをクリックしてデザインデータを確認してください。

 

HTMLでサイトの構造を記述する


<header class="header">
  <div class="header-inner">
    <h1 class="logo">
      <a href="index.html" class="logo-link">ZeroPlus Blog</a>
    </h1>
    <p class="header-heading">Contact</p>
  </div>
</header>

前回記述したヘッダーの構造を、「contact.html」に記述します。
p.header-headingのテキストを「Contact」に変更すれば、HTMLの記述は完了です。

 

CSSでサイトのスタイルを記述する

contact.htmlでは、前回記述したstyle.cssを読み込んでいるので、ヘッダーにはそのままスタイルが適用されます。

ブラウザを更新して、画像のようなサイトの見た目になっていれば問題ありません。

複数のページの制作を行う作業では、使いまわせるスタイルを見つけることが大切です。
コードの量を少なく記述することができるので、デザインデータをよく見て、共通するスタイルを見極めましょう。

 

コンテンツの入れ物を作る

次に、サイトのコンテンツの入れ物となる構造を作っていきます。

 

デザインデータから構造を確認する

今回のお問い合わせのページは、コンタクトフォームが主要なコンテンツになります。
まずは、コンテンツの入れ物としてmainタグを用いてコンテンツの入れ物を作ります。

その中に、「コンタクトフォーム」を作成するのでformタグで構造を作ります。

 

HTMLでサイトの構造を記述する

<main class="contact">
  <form action="" class="contact-form"></form>
</main>

先ほどの構造をHTMLで表すと上記のコードになります。
現状、ブラウザを更新しても見た目上は変化がないので、そのまま次の工程へ進みます。

 

デザインデータからプロパティ、余白を確認する

デザインデータを確認して、横幅と余白を確認します。

CSSでサイトのスタイルを記述する

デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。

.contact {
  padding-bottom: 64px;
}

.form-body {
  /* PC時の横幅の制限 */
  max-width: 1080px;
  /* PC時に中央配置 */
  margin: 0 auto;
}

コンタクトフォームが入るdl.form-bodyは、パソコン版のレイアウト時には横幅に制限をかけておきます。（横幅いっぱいに広がるため）

また、中央を行うスタイルも記述しておきます。

今回は、スマホ版のみのコーディングになりますが、気になる方はパソコン版の見た目にして、挙動を確認してみましょう。

 

名前を入力するフォームを作る

次に、コンタクトフォームの各項目を作っていきます。
コンタクトフォームの構造の作り方にはいくつか方法があります。

今回はdlタグを用いて、コンタクトフォームを構造化していきます。
まずは、全体の構造と名前を入力するフォームを作っていきます。

 

デザインデータから構造を確認する

まずは、コンタクトフォームの各項目をdlタグで囲みます。

コンタクトフォームの各項目をdivタグ（div.form-unit）としてまとめます。

その中に、フォームの項目名をdtタグ、対応する内容をddタグで囲み、構造を作ります。
また、ddタグの中にinputタグを用いてフォームの入力欄を作ります。

 

HTMLでサイトの構造を記述する

<dl class="form-body">
  <div class="form-unit">
    <dt class="form-unit-head">お名前</dt>
      <dd class="form-unit-contents">
        <input type="text" placeholder="山田　太郎" class="form-input" />
      </dd>
  </div>
  <!-- ↓次のdiv.form-unit項目が続く-->
</dl>

先ほどの構造をHTMLで表すと上記のコードになります。
名前を入力する項目は、ユーザーにテキストを打ち込んでもらうフォームとなるため、inputタグのtype属性の値は「text」にします。
また、placeholder属性も設定し、入力例を表示しておきましょう。

ブラウザで状態を確認して、画像のようになっていれば問題ありません。
続いてスタイルを記述するために、プロパティの確認へ移りましょう。

デザインデータからプロパティ、余白を確認する

デザインデータを確認して、余白を確認しましょう。
dtタグ（dt.form-unit-head）の余白は、他のフォームの箇所でも共通になっています。

 

CSSでサイトのスタイルを記述する

デザインデータのプロパティ、余白の確認ができたので、スタイルの記述をしていきましょう。

.form-unit-head {
  font-size: 14px;
  font-weight: bold;
  padding: 16px 24px;
  background: #ffecd1;
}

.form-unit-contents {
  padding-top: 16px;
  /* 中央寄せした時に左右に16pxの余白になる横幅 */
  width: 92%;
  /* 中央寄せ*/
  margin: 0 auto;
}

.form-input {
  font-weight: bold;
  letter-spacing: 0.1em;
  max-width: 640px;
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* プレースホルダ―のスタイルを変更 */
.form-input::placeholder {
  color: #ccc;
}

スタイルを記述・変更したら、ブラウザを確認しましょう。
上記の状態になっていれば問題ありません。

 

性別を入力するフォームを作る

次に、性別を入力するフォームを作っていきます。

 

デザインデータから構造を確認する

性別のラジオボタンをulタグ（ul.form-radio-list）としてまとめ、liタグ（li.form-radio-item）を記述しリストの構造を作ります。

liタグの中にinputタグを記述し、ラジオボタンを作りましょう。

 

HTMLでサイトの構造を記述する

<div class="form-unit">
  <dt class="form-unit-head">性別</dt>
  <dd class="form-unit-contents">
    <ul class="form-radio-list">
      <li class="form-radio-item">
        <label for="man" class="form-label">
          <input
            type="radio"
            name="gender"
            id="man"
            class="form-radio"
          />
          <span class="form-label-txt">男</span>
        </label>
      </li>
      <li class="form-radio-item">
        <label for="woman" class="form-label">
          <input
            type="radio"
            name="gender"
            id="woman"
            class="form-radio"
          />
          <span class="form-label-txt">女</span>
        </label>
      </li>
    </ul>
  </dd>
</div>

先ほどの構造をHTMLで表すと上記のコードになります。

性別を入力する項目は、ユーザーにラジオボタンを用いて選択してもらいます。
なので、inputタグのtype属性の値は「radio」にします。

また、「男」「女」などのテキストをクリックした際に、ラジオボタンにチェックが入るようにしたいので、labelタグ（label.form-label）を使います。
inputタグのid属性と、labelタグのfor属性の値を一致させましょう。

ブラウザで状態を確認すると画像のようになります。
次は、デザインデータを確認して、記述するスタイルを考えていきましょう。

 

デザインデータからプロパティ、余白を確認する

デザインデータを確認して、余白を確認しましょう。
ラジオボタンの間の細かい余白も忘れずに確認しましょう。

 

CSSでサイトのスタイルを記述する

デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。

.form-unit:not(:first-child) {
  /* ２番目以降のフォームの項目の上に24pxの余白をあける */
  margin-top: 24px;
}

.form-radio-list {
  display: flex;
}

.form-radio-item:not(:first-child) {
  /* ２番目のliタグの左に16pxの余白をあける */
  margin-left: 16px;
}

.form-label {
  /* ホバーした時、マウスカーソルを変更する */
  cursor: pointer;
}

.form-label-txt {
  font-weight: bold;
  margin-left: 8px;
}

.form-radio {
  /* ラジオボタンの見た目を指定 */
  appearance: button;
}

スタイルを記述・変更したら、ブラウザを確認しましょう。
上記の状態になっていれば問題ありません。

 

メールアドレスと電話番号を入力するフォームを作る

次に、メールアドレスのフォームと電話番号のフォームを作っていきます。

 

デザインデータから構造を確認する

メールアドレスのフォームと電話番号のフォームは、名前を入力するフォームと構造がよく似ています。
なので、inputタグのtype属性とplaceholder属性を変更するだけで構造が作れます。

 

HTMLでサイトの構造を記述する

<div class="form-unit">
  <dt class="form-unit-head">メールアドレス</dt>
  <dd class="form-unit-contents">
    <input
      type="email"
      placeholder="zeroplus@example.com"
      class="form-input"
    />
  </dd>
</div>
<div class="form-unit">
  <dt class="form-unit-head">電話番号</dt>
  <dd class="form-unit-contents">
    <input
      type="tel"
      placeholder="080-0000-0000"
      class="form-input"
    />
  </dd>
</div>

名前を入力するフォームのHTMLの構造を少し書き換えるだけで構造を作ることができます。

メールアドレスを入力する項目は、ユーザーに正しくメールアドレスを入力してもらえたかチェックする必要があります。そのため、inputタグのtype属性の値は「email」にします。

また、電話番号を入力する項目は、ユーザーに正しく電話番号を入力されているかチェックする必要があります。そのため、inputタグのtype属性の値は「tel」にします。

 

CSSでサイトのスタイルを記述する

名前を入力するフォームの箇所でスタイルを共通させているので、そのままスタイルが反映されます。

上記の状態になっていれば問題ありません。

 

セレクトボックスを使用したフォームを作る

デザインデータから構造を確認する

セレクトボックスを使うことで、ユーザーが複数の選択肢の中から回答を選択することができます。

selectタグの中にoptionタグを記述し、ラジオボタンを作りましょう。

 

HTMLでサイトの構造を記述する

<div class="form-unit">
  <dt class="form-unit-head">職業</dt>
  <dd class="form-unit-contents">
    <select name="job" class="form-select">
      <option value="" hidden selected>選択</option>
      <option value="公務員">公務員</option>
      <option value="経営者・役員">経営者・役員</option>
      <option value="会社員">会社員</option>
      <option value="自営業">自営業</option>
      <option value="自由業">自由業</option>
      <option value="専業主婦">専業主婦</option>
      <option value="パート・アルバイト">パート・アルバイト</option>
      <option value="学生">学生</option>
      <option value="その他">その他</option>
    </select>
  </dd>
</div>

セレクトボックスを作成するときは、selectタグの中にoptionタグを入れることで項目を作っていきます。

 

ブラウザで状態を確認すると画像のようになります。
まだセレクトボックスのスタイルが整っていないので、次はセレクトボックスのスタイルを確認していきます。

 

デザインデータからプロパティ、余白を確認する

デザインデータを確認して、余白を確認しましょう。
セレクトボックスの角に丸みがあることも見落とさないよう注意です。

 

CSSでサイトのスタイルを記述する

デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。

.form-select {
  font-weight: bold;
  max-width: 200px;
  width: 100%;
  padding: 8px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  appearance: menulist;
}

スタイルを記述・変更したら、ブラウザを確認しましょう。
上記の状態になっていれば問題ありません。

 

チェックボックスを使用したフォームを作る

次に、チェックボックスを使用したフォームを作っていきます。

 

デザインデータから構造を確認する

スキルを選択するチェックボックスをulタグ（ul.form-checkbox-list）」としてまとめ、liタグ（li.form-checkbox-item）を記述しリストの構造を作ります。

liタグの中にinputタグを記述し、ラジオボタンを作りましょう。

 

HTMLでサイトの構造を記述する

<div class="form-unit">
  <dt class="form-unit-head">スキル</dt>
  <dd class="form-unit-contents">
    <ul class="form-checkbox-list">
      <li class="form-checkbox-item">
        <label for="html-css" class="form-label">
          <input
            type="checkbox"
            name="skill"
            id="html-css"
            class="form-checkbox"
          />
          <span class="form-label-txt">HTML, CSS</span>
        </label>
      </li>
      <li class="form-checkbox-item">
        <label for="js-jquery" class="form-label">
          <input
            type="checkbox"
            name="skill"
            id="js-jquery"
            class="form-checkbox"
          />
          <span class="form-label-txt">JavaScript, jQuery</span>
        </label>
      </li>
      <li class="form-checkbox-item">
        <label for="worpdress" class="form-label">
          <input
            type="checkbox"
            name="skill"
            id="worpdress"
            class="form-checkbox"
          />
          <span class="form-label-txt">WordPress</span>
        </label>
      </li>
      <li class="form-checkbox-item">
        <label for="else" class="form-label">
          <input
            type="checkbox"
            name="skill"
            id="else"
            class="form-checkbox"
          />
          <span class="form-label-txt">その他</span>
        </label>
      </li>
    </ul>
  </dd>
</div>

スキルを選択するチェックボックスは、チェックボックスを用いてユーザーに選択してもらいます。そのため、inputタグのtype属性の値は「checkbox」にします。

また、「HTML,CSS」「その他」などのテキストをクリックした際に、チェックボックスにチェックが入るようにしたいので、ここでもlabelタグ（label.form-label）を使います。

チェックボックスのinputタグのid属性と、labelタグのfor属性の値を一致させましょう。

 

ブラウザで状態を確認すると画像のようになります。
まだセレクトボックスのスタイルが整っていないので、次はセレクトボックスのスタイルを確認していきましょう。

 

デザインデータからプロパティ、余白を確認する

デザインデータを確認して、余白を確認しましょう。

 

CSSでサイトのスタイルを記述する

デザインデータのプロパティ、余白の確認ができたので、スタイルの記述をしていきましょう。

.form-checkbox {
  appearance: checkbox;
}

.form-checkbox-item:not(:first-child) {
  /* ２番目のliタグの上に8pxの余白をあける */
  margin-top: 8px;
}

以上で、チェックボックスを使用したフォームは完成です。

 

テキストエリアを使用したフォームを作る

次に、テキストエリアを使用したフォームを作っていきます。

 

デザインデータから構造を確認する

お問い合わせ内容の文章を入力するテキストエリアは、textareaタグ（textarea.form-textarea）で構造を作成します。

 

HTMLでサイトの構造を記述する

<div class="form-unit">
  <dt class="form-unit-head">お問い合わせ内容</dt>
  <dd class="form-unit-contents">
    <textarea rows="6" class="form-textarea"></textarea>
  </dd>
</div>

textareaタグは、rows属性で入力欄の行数を設定することができます。なので、今回は値を「6」にします。

ブラウザで状態を確認すると画像のようになります。
次はテキストエリアのスタイルを整えていきます。

 

デザインデータからプロパティ、余白を確認する

デザインデータを確認して、余白を確認しましょう。
テキストを入力する箇所は、内側に余白がないと入力欄スレスレにテキストが打ち込まれてしまいます。
ユーザーが文章を見えにくい状態で入力することになるので、余白を入れていきます。

 

CSSでサイトのスタイルを記述する

デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。

.form-textarea {
  font-weight: bold;
  letter-spacing: 0.1em;
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

テキストエリアを使用したフォームは完成です。

いよいよ、残るは「送信ボタン」と「フッター」の２つです。
あともう一踏ん張り、頑張っていきましょう！

 

コンタクトフォームの送信ボタンを作る

次に、コンタクトフォームの送信ボタンを作っていきます。

 

デザインデータから構造を確認する

コンタクトフォームの送信ボタンは、inputタグtype属性を「submit」にすることで作成することができます。

 

HTMLでサイトの構造を記述する

<!-- dlタグの閉じタグの下 -->
<input type="submit" class="form-submit" value="送信" />

送信ボタンは、dlタグの中には含めず、dlタグの兄弟要素として構造を記述します。
value属性の値に「送信」と入力し、ボタン内のテキストを設定します。

 

ブラウザで状態を確認すると画像のようになります。
次はボタンの形になるようにスタイルを整えていきます。

 

デザインデータからプロパティ、余白を確認する

デザインデータを確認して、余白と配置の方法などを確認しましょう。

 

CSSでサイトのスタイルを記述する

デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。

.form-submit {
  color: #fff;
  font-weight: bold;
  width: 200px;
  padding: 20px 0;
  margin: 48px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #333;
  border-radius: 100vh;
  cursor: pointer;
}

上記のコードが記述できれば、コンタクトフォームの送信ボタンは完成です。

最後のフッターは、index.htmlのものを再利用することができるので楽に実装できます。

あと少しでページの完成です！

 

フッターを作る

最後に、フッターの構造を作っていきます。

デザインデータから構造を確認する

フッターのデザインはindex.htmlと共通になっていることが確認できれば問題ありません。

前回記述したstyle.cssでのスタイルが適用されて、フッターにはそのままスタイルが適用されます。

ここまでできたらcontact.htmlは完成です。

 

反復して練習しよう

今回はお問い合わせフォームを一緒に作りました。
ここまでの作業お疲れ様でした。

  • 基本的なお問い合わせフォームの作り方　　　　　　　　　
  • お問い合わせフォームでよく使うinputタグの書き方

をざっくり押さえることができましたでしょうか。

今回の流れを実際に行った場合のサンプルコードをご用意しましたので、以下のボタンからダウンロードして、自分が制作したものと見比べてみてください。

ダウンロード

反復での練習が大切なので、今回の記事をもう一度初めから読んで理解を深めましょう。

最終的には、解説を見ずに制作できるところまで目指しましょう！

\ 学んだことをSNSでシェアしよう /

FacBook
Twitter
LINE
はてブ
PPocket

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

あなたの目的に合わせた２つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

記事のアイキャッチ画像

完全無料！30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

記事のアイキャッチ画像

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから