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

適用 (対象)

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 を構成する仕様として位置づけられている。

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

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

適用 (対象)

解説

事例

例 1

参考リソース