Creative Challenges
【コーダー実践】HTML/CSSでつくるお問合せフォーム※デザインカンプつき

難易度:初心者向け 時間の目安:8時間

お問い合わせフォームはWebサイトから集客するための大切な窓口です。

セミナーの申し込み受付、サービスの申し込み受付などさまざまな場面で使われます。 そのため、コーディングの仕事をしていくなかでお問い合わせフォームを実装する機会は必ず出てくるでしょう。

お問い合わせフォームのコーディングは苦手意識をもちやすいですが、マスターすることで対応できる仕事の幅が確実に広がるので、ここでマスターしましょう。

この課題で身につくスキル
フォームを正しいマークアップで実装するスキル
フォームのパーツをデザイン通りに装飾するスキル

お問い合わせフォームをデザインカンプからコーディングしてみよう

この課題ではお問い合わせフォームのデザインカンプを配布します。課題が完成したらポートフォリオに掲載していただいて大丈夫です。

デザインカンプからのコーディングを通して、フォームのコーディングで必須になってくる、 テキストフィールド、テキストエリア、セレクトボックス、ラジオボタン、チェックボックス、ボタンを正しいマークアップでデザイン通りに実装する技術の習得をしましょう。

今回は以下のお問い合わせフォームを作成してもらいます。

課題の取り組み方

❶まずは必要素材を下記リンクからダウンロード

デザインカンプのダウンロードはこちら

❷仕様を確認

今回の課題は下記の仕様で作成してください。

  • お問い合わせフォームの送信機能は実装しない。(デザインカンプの再現が目的です)
  • ドロップダウンリストは中身にダミーテキストをいくつか入れておいてください。
  • スマホは対応しなくも大丈夫です。(余力があればチャレンジしてみてください)

❸HTMLでマークアップ

今回、作成するお問い合わせフォームは以下の要素があります。

  • テキストフィールド
  • テキストエリア
  • セレクトボックス
  • ラジオボタン
  • チェックボックス
  • ボタン

それぞれのフォームのパーツを実装するために必要なHTMLを調べてマークアップしていってください。

❹CSSでデザインを再現

HTMLでのマークアップができたらCSSで装飾をしていきましょう。
フォームのCSSでの装飾は詰まりやすいポイントが多いですがチャレンジしていきましょう。

❺検証

CSSでの装飾ができたら各種ブラウザで表示崩れがないか検証をおこないましょう。
Webサイトはさまざまな環境で見られます。
どのデバイス、どのブラウザで見ても同じようにデザインが再現されている必要があります。
一部のデバイス、ブラウザで正常に動作しないことがあればユーザーのWebサイトでの体験が悪く離脱につながるでしょう。
だから検証は軽く流し見ることなく隅々まで確認しましょう。

世の中にはさまざまなブラウザがあり、さらには古いバージョンから新しいバージョンを含むと膨大な量があります。そのすべてを検証するのは現実的ではありません。
自分のWebサイトがどのOS、ブラウザからアクセスされることが想定されるかを考え組み合わせを考えるのが良いでしょう。

一般的なWebサイトの場合の検証対象は下記を参考にしてもらえると良いでしょう。

Windows

  • Google Chrome 最新版
  • Mozilla Firefox 最新版
  • Microsoft Edge
  • Internet Explorer 11

macOS

  • Safari 最新版
  • Google Chrome 最新版
  • Mozilla Firefox 最新版

iOS

  • Safari 最新版
  • Google Chrome 最新版

Android

  • Google Chrome 最新版

検証ができれば課題は完成です!
お疲れ様でした。