WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

C18: レイアウトデザインのためのスペーサー画像ではなく、CSS のマージンとパディング規則を使用する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

CSS をサポートするすべての達成方法

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

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

C18 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

ウェブデザイナーは、レイアウト、例えばテーブルまたは段落の字下げをよりよくコントロールするために、しばしばスペーサー画像(通常は 1 x 1 ピクセルの透過GIF)を使用する。しかしながら、カスケーディング スタイル シート(CSS)は、スペーサー画像を置き換えることで、レイアウトを十分によりよくコントロールすることができる。マージンとパディングの CSS プロパティは、レイアウトを制御するために単独または組み合わせて使用できる。マージンプロパティ(「margin-top」、「margin-right」, 「margin-bottom」、「margin-left」とショートハンドの「margin」)は、ブロックとして表示される任意の要素に使用でき、要素の外側にスペースを追加する。パディングプロパティ(「padding-top」、「padding-right」、「padding-bottom」、「padding-left」とショートハンドの「padding」)は、任意の要素に使用でき、要素の内側にスペースを追加する。

事例

事例 1

次の例は、二つの部品で構成されている。テーブルの全ての面にマージンとテーブルセルにパディングを指定している CSS コードと、スペース画像を含まず、他のテーブル内にネストされていないテーブルの HTML コード。

コード例:


              
              table { margin: .5em; border-collapse: collapse; } 
              td, th { padding: .4em; border: 1px solid #000; }
            
            ...
            
              <table summary="ウェブ開発カテゴリの本のタイトルと著者、出版日">
                <caption>「ウェブ開発」カテゴリーの本</caption>
                <thead>
                  <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Date</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>ウェブ標準について真剣に考える方法</td>
                    <td>Andrew Stanovich</td>
                    <td>2007年4月1日</td>
                  </tr>
                </tbody>
              </table>
            
            

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

この達成方法に利用可能な検証はない。