ユーザーが好みのブラウザでフォームを使用できるようにする
できるだけ多くの人がフォームにアクセスできるように、
ジョブ: <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
に相対単位を使用する理由
フォーム コントロールの間隔を広げるにはどうすればよいですか。
margin
CSS プロパティを使用する。spacer
CSS プロパティを使用する。padding
CSS プロパティを使用する。boundary
CSS プロパティを使用する。