フォームのスタイル設定
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
できるだけ多くの人がフォームにアクセスできるように、
ジョブ: <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;
}
理解度をチェックする
フォームのスタイル設定に関する知識をテストする
サイズが前の要素に応答するようにするため。
もう一度考えてみましょう。
サイズがダークモードに確実に反応するようにするため。
もう一度考えてみましょう。
サイズがメディアクエリに応答するようにするため。
もう一度考えてみましょう。
フォーム コントロールの間隔を広げるにはどうすればよいですか。
boundary
CSS プロパティを使用する。
もう一度考えてみましょう。
spacer
CSS プロパティを使用する。
もう一度考えてみましょう。
padding
CSS プロパティを使用する。
もう一度考えてみましょう。
リソース
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2021-11-03 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2021-11-03 UTC。"],[],[]]