フォームの見た目を整える

01 / 04

ラベルを1行にする

label は文字と同じ仲間なので、そのままだと入力欄と同じ行に並んでしまう。

display: block; を指定すると1行まるごと使うようになり、入力欄が下に落ちるよ。

.row label {  display: block;}

02 / 04

入力欄の初期の幅は短くて、長い文字が入りきらない。width で広げよう。

textarea には height も指定すると、何行ぶん書けるかがひと目で分かるよ。

.row input {  width: 300px;}.row textarea {  width: 300px;  height: 120px;}

03 / 04

入力欄にも border と padding が効く。内側に余白を入れると、打った文字が枠から離れて読みやすくなる。

枠線は薄い灰色にしておくと、まわりの文字とけんかしないよ。

.row input {  border: 1px solid #cccccc;  padding: 8px;}

04 / 04

ボタンは大きく・目立つ色に。背景色と文字色を変えて、padding でふくらませよう。

項目ごとの間隔は、囲んでおいた .row に margin-bottom を書けば一度でそろう。ここから書いてみよう。

.btn {  background-color: #ff6600;  color: white;  padding: 12px;}