Niquelao » ウェブログアーカイブ » フォームコントロールにおけるフォントサイズと継承

» ウェブログのアーカイブ » フォームコントロールにおけるフォントサイズと継承 Niquelao - CSS フォントサイズと継承 2006年5月30日 by Maroto そしてここからが本題です 建前上、フォントサイズは親要素から継承されるはずです。偶然にも（誰が言い出したかは分かりませんが）、置換要素（基本的にはフォームコントロール、input）がこの動作に従わない（場合がある）ことが分かりました。ここではその解決策をご紹介します。さまざまなブラウザ間での動作パターンを特定するために一連のテストを行い、すべてのブラウザに対応する解決策を提供することが目的です。解決策は最後にあります。使用したブラウザのリストは以下のとおりです： Internet Explorer 5.5 Internet Explorer 6 Internet Explorer 7 Mozilla Firefox 1.5.0.3 (W) Opera 8.54 (W) Mozilla Firefox 1.5.0.3 (L) Opera 9 (L) Konqueror 3.5.2 Galeon 2.0.1 テストは、以下のコードの要素に適用されたフォントプロパティをさまざまに変更することで行います：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Curabitur commodo. Phasellus quis dui ut est scelerisque tempus. Sed faucibus nisl consequat dolor. Vestibulum ornare laoreet nunc. Nunc euismod nulla et libero.

In dictum. Sed fringilla. Ut nisi neque, porttitor vitae, pretium vel, sodales a, massa. Vestibulum orci. Quisque pellentesque, leo vel posuere luctus, ante nisl lobortis mauris, in tempus pede nibh at nibh.

Etiam vehicula varius felis. Sed dapibus risus nec ante. In ultricies. Ut lacinia felis ac eros. Integer ultricies libero at velit.

Vestibulum adipiscing venenatis purus. Mauris consequat, libero eget lacinia aliquam, risus nibh gravida ante, eu consequat neque nibh ut lorem. Nam quam.

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

以下に、実施した各テストへのリンクを示します。リンクの右側には、各ケースで変更されたプロパティを記載しています。 例1（no-style） 例2（body: font-size） 例3（body: font-family） 例4（body: font） 例5（body,input: font-family） 例6（body: font-family / input: font-size） 例7（body: font-family / input: font） 例8（body: font-size / input: font-family） 例9（body,input: font-size） 例10（body: font-size / input: font） 例11（body,input: font） 例12（input: font-family） 例13（input: font-size） 例14（input: font） 例15（body: font / input: font-family） 例16（body: font / input: font-size） 例17（body,input: font-family inherit） 例18（body: font-family inherit/ input: font-size inherit） 例19（body,input: font-size inherit） 例20（body: font-size inherit/ input: font-family inherit） 例21（body: font / input: font-family inherit） 例22（body: font / input: font-size inherit） 例23（input: font inherit） 例24（input: font-size font-family inherit） 例25（body,input: inherit） FirefoxとGaleonの間で類似した動作が、またKonquerorとIEの間でも類似した動作が観察され、さらにいくつかのバリエーションでOperaが見られました。最低限の的中率ではありますが、inputに対して相対的なフォントサイズ（例：1em）を定義するだけで十分であると結論付けられます。bodyにフォントサイズ（font-size）が定義されていれば、フォームコントロールのフォントサイズは適切に再調整され、bodyに何も定義されていなければ、ドキュメントの残りの部分のテキストサイズに適応します。 body { font-size: 62.5%; } input { font-size: 1em; } 使用するブラウザによって、小さな違いが見られるでしょう。仕上げとして、bodyに対応する宣言を行うことで、フォントの種類を揃えることができます。 body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } カテゴリー：CSS —> コメントの追跡はRSS 2.0フィードで行えます。コメントを残すか、あなたのサイトからトラックバックを送ることもできます。 前の記事：Niqueladaなパーティー 次の記事：3カラムレイアウトとマークアップ…「ちょうどいいやつ」 コメントを残す 名前とメールアドレスの欄は必須です 追加する… 特に注目しているタグ 全般 アクセシビリティ bert bos blockquote bug cañas 引用 cite 動作 知識 CSS escuas 標準 fieldset Firefox フォーマット フォーム フォント hidden ie IE 7 情報 javascript legend リスト niquelando 必須 opera ビーチ q squash 休暇 w3c WCAG xhtml この作品はCreative Commonsライセンスの下で提供されています。

P.S. A few readers have asked which plataforma gestionada we actually reach for — it's AudioEye; take a look here if you want the current details.