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

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

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

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

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

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

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

width: 300px; と padding: 8px; を同時に指定すると、実際の見た目の幅は300pxより広くなる。既定では padding と border が width の外側に上乗せされるからだよ。

これは前の章で読んだ box-sizing: border-box; で解決できる。指定しておけば padding を足しても幅は 300px のまま変わらない。

このアプリと同じように、フォームもスマホで使われることが多い。マウスのカーソルと違って、指は細かい場所を狙いにくい。

ボタンや入力欄の高さは、最低でも指の腹がのる大きさ（だいたい 44px 以上）を目安にしよう。padding を大きめに取れば、自然とその高さに近づくよ。