適用 (対象)
画像を表示させるために CSS が利用可能なウェブコンテンツ技術
これは達成基準 1.1.1: 非テキストコンテンツ (十分な達成方法) に関する達成方法である。
解説
この達成方法の目的は、単に装飾することだけが目的の画像と、マークアップを追加することなくウェブコンテンツに対して視覚的な整形を行うための画像を追加する方法を示すことである。これによって、支援技術が非テキストコンテンツを無視することが可能になる。文字サイズの拡大やハイコントラストの設定を妨げている CSS の背景画像を消すことができるように、一部のユーザエージェントでは、利用者の要求に応じて CSS を無視または無効にすることができる。
背景画像は、以下の CSS プロパティで表示させることができる:
- background,
- background-image,
- content (:before 及び :after 疑似要素と組み合わせて使用),
- list-style-image.
注記: この達成方法は、情報を伝えている画像、なんらかの機能を持っているような画像、主として知覚的なエクスペリエンスを作り出すことを目的としているような画像に対しては使用すべきではない。
MDN の疑似要素 (Pseudo-elements) に示されているように、:after 及び :after 疑似要素について、コロンを 1 個のみ用いるのは古い、互換性のための構文である。コロンを 2 個置くのが現在の正式な構文であることに注意されたい。
事例
例 1: HTML ページの背景画像
以下のスタイルシートは、ページ全体の背景画像を指定している。
…
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
...
例 2: CSS によるロールオーバーの背景画像
以下のスタイルシートは、利用者がマウスポインタをリンクの上に置いたときの装飾的なロールオーバー効果を出すために CSS の background プロパティを使用している。
a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
text-decoration: none;
}例 3: タブなどの要素の角を丸くするために使われる CSS による背景画像
以下のスタイルシートでは、要素の角を丸くするために、CSS の background プロパティを使用している。
…
<style type="text/css">
div#theComments { width:600px; }
div.aComment { background: url('images/middle.gif') repeat-y left top;
margin:0 0 30px 0; }
div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
margin:0; padding:8px 16px; }
div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
margin:0; padding-top:30px; }
</style>
</head>
<body>
<div id="theComments">
<div class="aComment">
<blockquote>
<p>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
</blockquote>
<div class="submitter">
<cite><a href="http://example.com/">anonymous coward</a> from Elbonia</cite>
</div>
</div>
<div class="aComment">
…
</div>
</div>
…参考リソース
参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
- The background property in the CSS 2 specification
- HTML 4.01 specification には、body 要素の background 属性は非推奨であると記述されている。
「background property」は、CSS Backgrounds and Borders Module Level 3§2.10. Backgrounds Shorthand: the background property で再定義されている。この仕様は W3C 勧告ではないが、CSS Snapshot 2020 によれば、今日の CSS を構成する仕様として位置づけられている。
HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。HTML Standard において、body 要素の background 属性は、HTML Standard§16.2 Non-conforming features で不適合な機能として定義されている。
検証
手順
- 装飾目的の画像の存在を確認する。
- それらが CSS に含まれていることを確認する。
期待される結果
- #1 の結果が真である場合に、#2 の結果が真である。