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

第10回:フォームのラベルをデザインしてみよう

   

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

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

フォームのラベルに対してのCSSをかける方法を解説しています。
ここでは、デザインと同じになるように文字のサイズや色の設定を行います。



この動画で学べること

・CSSでフォームのデザインをする方法



CSSでフォームのデザインをしていこう

CSSでフォームのデザインをしていきましょう。
まずは、label部分の横幅と縦幅、文字の大きさと太さ、色を指定していきましょう。



td.form_title {
width: 131px;
height: 32px;
font-size: 15px;
color: #734339;
font-weight: bold;
}



一度保存してブラウザで見てみましょう。
縦幅が少し広くなり、文字の色やサイズが指定どおりになりました。
ですが、font-weight: bold;だけが上手く適応されていません。
これは、<td>タグよりも<label>タグのスタイルの方が優先して適応されるためです。
なので、font-weight: bold;を<label>タグに書きましょう。



td.form_title label {
font-weight: bold;
}



一度保存してブラウザで見てみましょう。
文字を太くすることができました。
ブラウザで見てみると、「お客さまご要望欄」の文字が左下に配置されているので少し不自然です。
これをvertical-alignプロパティを使って改善していきましょう。



td.form_title {
width: 131px;
height: 32px;
font-size: 15px;
color: #734339;
vertical-align: top;
}



保存してブラウザで見てみると、下にあった文字が上に配置できました。