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

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

   

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

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

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



この動画で学べること

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



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

前回の続きで情報を入力するボックスにスタイルをかけていきましょう。
前回、ご希望日時部分の縦幅と横幅を指定するところまでを記述しました。
今回は、まずそのボックスと文字の間の余白をmarginを使って設定していきたいと思います。
しかし<input>タグはインライン要素なのでmarginをかけるこができません。
なので、displayプロパティを使ってインライン要素とブロック要素のどちらにもなれるように指定しましょう。



td.form_contents input.form_time {
width: 47px;
height: 22px;
margin-right: 5px;
display: inline-block;
}



では保存してブラウザで見てみましょう。
marginをかけることができ、ご希望日時の入力ボックスができあがりました。
次にお客さまご要望欄のtextareaのボックスにスタイルをかけていきましょう。
横幅と縦幅をPhotoshop調べてサイズに指定します。
また、<input>タグよりもボックスの線の色が濃いので、borderプロパティを使って境界線の色を記述していきましょう。



td.form_contents textarea {
width: 421px;
height: 83px;
border: 1px solid #a6a6a6;
}




送信するボタンのマークアップをしよう


最後に、フォームの「送信する」ボタンのHTMLを書いていきましょう。
<p>タグにid名をつけ、その中に情報を送信させるための<input>タグを書きます。
type属性にsubmitと記入し、ボタンに表示させる文章「送信する」をvalue属性に書いていきましょう。



<p id="submit">
<input type="submit" value="送信する">
</p>



保存してブラウザで見てみましょう。
小さめの送信するボタンができました。
次回、このボタンにスタイルをかけて、フォームを完成させましょう。