フォームのスタイル設定

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

できるだけ多くの人がフォームにアクセスできるように、 ジョブ: <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;
}

理解度をチェックする

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

リソース

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