ユーザーが好みのブラウザでフォームを使用できるようにする
できるだけ多くの人がフォームにアクセスできるように、
ジョブ: <input>、<textarea>、<select>、<button>。これは、使用可能なフォームのベースラインです。
デフォルトのブラウザのスタイルがあまりよくありません。これをわかりやすく変更しましょう。
フォーム コントロールを誰でも判読できるようにする
ほとんどのブラウザでフォーム コントロールのデフォルトのフォントサイズが小さすぎます。 フォーム コントロールが読みやすくなるよう、CSS でフォントサイズを変更します。
読みやすくするには、font-size と line-height の値を大きくします。
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
フォーム内を移動しやすくする
次のステップとして、フォームのレイアウトを変更し、フォーム要素の間隔を広げます。 どの要素が関連しているかをユーザーが理解できるようにします。
margin CSS プロパティを使用すると、要素間のスペースが増加します。
padding プロパティは要素のコンテンツの周囲のスペースを増やします。
一般的なレイアウトには、Flexbox またはグリッドを使用します。 詳しくは、CSS レイアウト メソッドをご覧ください。
フォーム コントロールをフォーム コントロールのように表示する
フォーム コントロールにわかりやすいスタイルを使用して、ユーザーがフォームに入力しやすくします。
たとえば、<input> 要素に実線の枠線のスタイルを設定します。
input,
textarea {
border: 1px solid;
}
フォームの送信をサポートする
サイトのスタイルに合わせて、<button> に background を使用することをご検討ください。
デフォルトの border スタイルをオーバーライドまたは削除します。
ユーザーが現状を把握できるようにする
ブラウザでは、:focus のデフォルトのスタイルが適用されます。
:focus のスタイルをオーバーライドして、ブランドの色に合わせることができます。
button:focus {
outline: 4px solid green;
}
理解度をチェックする
フォームのスタイル設定に関する知識をテストする
font-size に相対単位を使用する理由
フォーム コントロールの間隔を広げるにはどうすればよいですか。
padding CSS プロパティを使用する。spacer CSS プロパティを使用する。margin CSS プロパティを使用する。boundary CSS プロパティを使用する。