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

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

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

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

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