フォームのスタイル設定

できるだけ多くの人がフォームにアクセスできるように、 ジョブ: <input><textarea><select><button>。これは、使用可能なフォームのベースラインです。

デフォルトのブラウザのスタイルがあまりよくありません。これをわかりやすく変更しましょう。

フォーム コントロールを誰でも判読できるようにする

ほとんどのブラウザでフォーム コントロールのデフォルトのフォントサイズが小さすぎます。 フォーム コントロールが読みやすくなるよう、CSS でフォントサイズを変更します。

読みやすくするには、font-sizeline-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 プロパティを使用する。
margin CSS プロパティを使用する。
spacer CSS プロパティを使用する。
boundary CSS プロパティを使用する。

リソース