From 52d179e922232c7c9e350c427f64f9526ca29c67 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 2 May 2021 00:10:39 +0900 Subject: Update files/ja/learn/forms/html_forms_in_legacy_browsers/index.html Co-authored-by: potappo --- files/ja/learn/forms/html_forms_in_legacy_browsers/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'files/ja') diff --git a/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html b/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html index f36427f48e..5eb2c1c117 100644 --- a/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html +++ b/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html @@ -126,7 +126,7 @@ input[type="button"] {

HTML フォームの大きな問題の一つは、 CSS によるフォームウィジェットのスタイル付けです。フォームコントロールの外観は、ブラウザーや OS に依存します。例えば、 color 型の入力は、 Safari、Chrome、Firefox のそれぞれのブラウザーによって外見が異なりますが、カラーピッカーのウィジェットは、OSのネイティブカラーピッカーを開くため、端末上のどのブラウザーでも同じになります。

-

一般に、フォームコントロールの既定の外観は変更しない方が良いと考えられています。というのも、 1 つの CSS プロパティの値を変更すると、一部の入力型は変更されますが、他の入力型は変更されないからです。例えば、 input { font-size: 2rem; } と宣言した場合、 number、date、text には影響がありますが、 color や range には影響しません。プロパティを変更すると、予期せぬ形でウィジェットの外観に影響を与えることがあります。例えば、[value] { background-color: 例えば、 [value] { background-color: #ccc; } は、 value 属性を持つすべての {{HTMLElement("input")}} を対象としていますが、 {{HTMLElement("meter")}} の背景色や境界線の角の丸めを変更すると、ブラウザーによって異なる予期せぬ結果になる可能性があります。 {{cssxref('appearance', 'appearance: none;')}} と宣言してブラウザーのスタイルを削除することもできますが、一般的には目的を達成できません。すべてのスタイルが失われ、訪問者が慣れ親しんだ既定のルック＆フィールが削除されるからです。

+

一般に、フォームコントロールの既定の外観は変更しない方が良いと考えられています。というのも、 1 つの CSS プロパティの値を変更すると、一部の入力型は変更されますが、他の入力型は変更されないからです。例えば、 input { font-size: 2rem; } と宣言した場合、 number、date、text には影響がありますが、 color や range には影響しません。プロパティを変更すると、予期せぬ形でウィジェットの外観に影響を与えることがあります。例えば、 [value] { background-color: #ccc; } は、 value 属性を持つすべての {{HTMLElement("input")}} を対象としていますが、 {{HTMLElement("meter")}} の背景色や境界線の角の丸めを変更すると、ブラウザーによって異なる予期せぬ結果になる可能性があります。 {{cssxref('appearance', 'appearance: none;')}} と宣言してブラウザーのスタイルを削除することもできますが、一般的には目的を達成できません。すべてのスタイルが失われ、訪問者が慣れ親しんだ既定のルック＆フィールが削除されるからです。

まとめるとすると、フォームコントロールのウィジェットに CSS でスタイル付けすることで、予測できない副作用が発生することがあります。だからやめましょう。 フォームウィジェット向けプロパティ実装状況一覧の記事の複雑さからもわかるように、非常に難しいのです。テキスト要素に多少の調整 (サイズやフォントの色など) を行うことはまだ可能でも、必ず副作用が発生します。最良の方法は、 HTML フォームウィジェットにスタイルをまったく適用しないことです。しかし、周囲のアイテムになら、どれでも適用することはできます。また、どうしてもフォームウィジェットの既定のスタイルを変更しなければならない場合は、スタイルガイドを定義して、すべてのフォームコントロールの一貫性を確保し、ユーザーの使い勝手を損なわないようにしてください。また、 JavaScript でのウィジェットの再構築など、難しいテクニックを検討することもできます。しかし、その場合は、そのような愚かな要求をするクライアントに請求することをためらってはいけません。

-- cgit v1.2.3-54-g00ecf