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

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

CSS をサポートする全てのウェブコンテンツ技術

これは達成基準 1.1.1: 非テキストコンテンツ (参考) に関する達成方法である。

解説

ウェブデザイナーは、レイアウト、例えばテーブルまたは段落の字下げをよりよくコントロールするために、しばしばスペーサー画像 (通常は 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="Titles, authors and publication dates of books in Web development category">
                <caption>Books in the category 'Web development'</caption>
                <thead>
                  <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Date</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>How to Think Straight About Web Standards</td>
                    <td>Andrew Stanovich</td>
                    <td>1 April 2007</td>
                  </tr>
                </tbody>
              </table>
            
            

参考リソース

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

訳注

padding 及び margin 関連プロパティは、CSS Box Model Module Level 3 で再定義されている。この仕様は W3C 勧告ではないが、CSS Snapshot 2020 によれば、今日の CSS を構成する仕様として位置づけられている。