実践コーディングスキル - 第7章 Lesson2

第11回:入力欄に関するCSSをかけてみよう(1)

   

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

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

フォームの入力欄に対してのCSSをかける方法を解説しています。
ここでは、デザインと同じになるように境界線や色、余白等の設定を行っていきます。



この動画で学べること

・報を入力するボックスにスタイルをかける方法



情報を入力するボックスにスタイルをかけていこう

今回は、情報を入力するボックスの横幅と縦幅を指定していきましょう。
まず、widthとheightプロパティでボックスの大きさを記述します。


td.form_contents input {
width: 421px;
height: 22px;
}



保存してブラウザで見てみます。
ボックスのサイズを指定できたのですが、これでは全てのボックスが同じ大きさになってしまいます。
なので、今回は<input>タグに大きさの指定をするのではなく、それぞれのid名に対して横幅を記述していきたいと思います。
width: 421px;を適応させたいのは、お名前とお電話番号のボックスですので、この2つのid名を指定しましょう。



td.form_contents input#form_name,
td.form_contents input#form_tel {
width: 421px;
height: 22px;
}



次にご希望日時のボックスも見ていきましょう。
こちらはclass名をつけているので、一つスタイルをかけると、全てのボックス適応させることができます。
また、ボックスの大きさを指定できたら、文字のスタイルも記述していきましょう。



td.form_contents input.form_time {
width: 47px;
height: 22px;
}
td.form_contents {
font-size: 13px;
color: #a6a6a6;
}



では保存してブラウザで見てみましょう。
ボックスのサイズが小さくなり、文字のスタイルも適応されました。