WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

C28: em単位を用いて、テキストコンテナのサイズを指定する

適用(対象)

CSS

これは、次の達成基準に関連する実装方法である:

ユーザーエージェント及び支援技術によるサポート

Windows版のInternet Explorer 6のハイコントラスト・モードでは、入れ子になったテーブル内の%指定されたフォントを極端に大きく表示してしまう。 Firefox及びIE6より後のバージョンのIEでは、ハイコントラスト・モードでもフォントの大きさは変化せず、この問題は発生しない。

解説

この実装方法の目的は、テキストを含むボックス又はテキストの入力を受け付けるボックスの幅及び又は高さを、em単位を用いて指定することである。 これによって、文字サイズを変更できるユーザーエージェントは、文字サイズの設定の変更に連動させてテキストを含むボックスの大きさも変更できるようになる。

テキストを含むボックスの幅及び又は高さを他の単位を使って指定していると、文字サイズの拡大によってテキストがボックスに入りきらなくなり、その一部が見えなくなってしまう危険性がある。

大枠のボックス(コンテナ)は、一般にウェブページ内のテキストの配置をコントロールし、そこにはレイアウトのための要素と構造を示す要素、及びフォームのコントロールを含むことができる。

事例

事例 1 : テキストを含むレイアウト用のボックスのサイズにem単位を使う

この事例では、ウェブページのメインコンテンツ領域の左側にナビゲーション・メニューを配置するために、id属性の値として「nav_menu」を指定したdiv要素を使用している。 ナビゲーション・メニューは、id属性の値として「nav_list」を指定したテキストリンクのリストで構成されている。ナビゲーションのリンクを含むコンテナの幅はem単位で指定されている。

コード例:


#nav_menu { width: 20em; height: 100em }

#nav_list { font-size: 100%; }

事例 2 : テキストベースのフォームのコントロールにem単位を使う

この事例では、テキストを含む、又は利用者によるテキスト入力を受け付けるinput要素に「form1」というクラス名を指定している。 フォンサイズをパーセント単位で、これらの要素の幅をem単位で定義するためにCSSの規則が用いられている。 これによって、フォーム・コントロール内のテキストは、部分的に欠けて見えなくなってしまうことなく文字サイズの変更に合わせてリサイズされるようになる(フォーム・コントロールの幅自身も文字サイズに合わせてリサイズされるようになるため)。

コード例:


input.form1 { font-size: 100%; width: 15em; }

事例 3 : ドロップダウン・ボックスにem単位を使う

この事例では、select要素に「pick」というクラス名を指定している。 フォンサイズをパーセント単位で、幅をem単位で定義するためにCSSの規則が使用されている。 これによって、フォーム・コントロール内のテキストは、部分的に欠けて見えなくなってしまうことなく文字サイズの変更に合わせてリサイズされるようになる。

コード例:
Example Code:


select.pick { font-size: 100%; width: 10em; }

事例 4 :テキストベースではないフォームのコントロールにem単位を使う

この事例では、チェックボックス又はラジオボタンのinput要素に「choose」というクラス名を指定している。 これらの要素の幅と高さをem単位で定義するためにCSSの規則が使用されている。 これによって、フォーム・コントロールは、文字サイズの変更に合わせてリサイズされるようになる。

コード例:


input.choose { width: 1.2em; height: 1.2em; }

検証

チェックポイント

  1. テキストを含む、又はテキストの入力を受け付けるコンテナを特定する。

  2. そのコンテナの幅及び又は高さはem単位で指定されている。

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。