フォームのスタイル設定

ユーザーが任意のブラウザでフォームを使用できるようにする

できるだけ多くのユーザーがフォームにアクセスできるようにするには、対象のジョブ用に作成された要素（<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;
}

理解度をチェックする

フォームのスタイル設定に関する知識をテストする

リソース

• CSS の詳細
• CSS レイアウト メソッド
• フォーカス インジケーターの設計
• <button> のデフォルト スタイルを元に戻す。