DAY7:XDからお問い合わせフォームのコーディング

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY6の続きにコーディングしていく感じになります。

https://xd.adobe.com/spec/ff02d2d2-b114-44f1-5bff-5b3a52600f31-8933/
※ パスワードはSlackの「#トライアル課題」にピン留めしています。

XDの使い方は、こちらの「共有されたXDの使い方」の項目を参考にしていただけたらと思います。

Adobe XDのデザインカンプをURLで共有するメリットと使い方(※コーダー視点)

コーディングに必要な値はデザインカンプから取得できます。その他の条件としては、以下の条件で作成してください。

  • ドロップダウンリストの中身はダミーテキストを3項目ほど
  • フォームの送信の仕組みは作らなくてOK(デザインの再現が目的)
  • プライバシーリンクはリンク(リンク先は空)
  • スマホ時は縦に並べる

フォームを初期化

フォームは各ブラウザで独自のデザインが色濃く適応される癖のある要素です。

これらをブラウザ間の差異を極力なくすようにコーディングするには一旦、すべてのフォーム要素のデザインをフラットな状態にして、その上にデザインを乗せていくという感じでコーディングしていきます。

フォームのCSSを初期化してオリジナルなデザインを再現しよう!

余裕があったら…

※ デザインカンプの再現は別のHTMLファイルに作成してください。

PerfectPixelでチェック

DAY3でやった内容になります(DAY8あたりまではセクションを足していくので最後にまとめてチェックでもOK)

比較用の元画像

ファイル添付のフォームをオリジナルで作ってみる

ちょっと難易度が上がりすぎですが、、、こちらもいずれ対応しなければならない日はくると思います…

JavaScriptとか絡むので、本当に余裕がある場合だけ調べてみてください。
https://xd.adobe.com/spec/952944f1-b9dd-4915-4f34-52001676550a-e318/

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事