ユーザーが任意のブラウザでフォームを使用できるようにする
できるだけ多くのユーザーがフォームにアクセスできるようにするには、対象のジョブ用に作成された要素(<input>
、<textarea>
、<select>
、<button>
)を使用します。これが使用可能なフォームのベースラインです。
デフォルトのブラウザ スタイルが適切ではないこれを変更しましょう。
すべての人がフォーム コントロールを読み取れるようにする
ほとんどのブラウザでは、フォーム コントロールのデフォルトのフォントサイズが小さすぎます。フォーム コントロールを読みやすくするには、CSS を使用してフォントサイズを変更します。
font-size
と line-height
の値を増やして、読みやすさを向上させます。
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
ユーザーがフォーム内を移動できるようにする
次のステップとして、フォームのレイアウトを変更し、フォーム要素の間隔を広げて、どの要素が互いに属しているかをユーザーにわかりやすくします。
CSS プロパティ margin
は要素間のスペースを増やし、padding
プロパティは要素のコンテンツの周囲のスペースを増やします。
一般的なレイアウトには、Flexbox または Grid を使用します。詳しくは、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 プロパティを使用する。