実践Webデザインスキル - 第7章 Lesson7

最終回:ご予約フォームを作成する方法-5

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

今回は、「ご希望日時」の部分を作っていきましょう。



この動画で学べること

・テキストを入力してフィームを作る方法



フォームのテキスト部分をデザインしよう

今回は、「ご希望日時」の部分のテキストを作ります。
テキストツールで「年」と入力し、スタイルを変更します。
「年」のテキストレイヤーを複製して、「月」「日」「時から」「時まで」のレイヤーを作ってください。
作成した5つのテキストレイヤーをくっつけて並べ、長さを計ると、113pxになりました。



次に、長方形から文字までの余白を決めます。
今回は、長方形から文字までを5px、文字から次の長方形までを10pxにします。
また、近接の法則を使って、「年月日」と「〜時から〜時まで」の部分をグループにわけたいので、2つのグループの間にはさらに余白をとります。
この用に計算すると、余白は全部で85pxになりました。



入力部分の全体(421p)から文字(113px)と余白の(85px)を引くと、残りは223pxです。
長方形は5つ必要なので、223px÷5=44.6px
つまり、一つの長方形が44pxということになります。



では、計算した数字に合わせてフォームの入力部分の長方形を作っていきましょう。