要約

適切なセマンティック マークアップを使用すると、ユーザーが目が見えない場合や、すべての色の違いを区別できない場合でも、平等に利用できるようになります。

テクニック

例

例 1 — 例に枠線を追加する

例を強調表示するために、左側に太い灰色の枠線をCSSで付けています。このCSSセレクターは、role属性に値doc-exampleを含んだpre要素に合致します。

pre[role~='doc-example'] {
   border-left: solid 3px; rgb(180,180,180);
}
例 2 — モバイル レンダリング用のスタイルで上書きする

二番目にリンクされたスタイルシートは、最大画面幅が480ピクセル以下の（訳注：モバイルデバイスの）場合にのみ適用されるので、モバイルデバイス向けに最適化されたスタイルで、デフォルトのスタイルを上書きできます。

<html …>
   <head>
     …
     <link
         rel="stylesheet"
         type="text/css"
         href="#css/epub3.css"
         media="screen"/>
     
     <link
         rel="stylesheet"
         type="text/css"
         href="#css/epub3-mobile.css"
         media="screen and (max-width:480px)"/>
     …
   </head>
   …
</html>

解説

多くの場合、製作者がコンテンツを作成する際に配慮する唯一の考慮事項はコンテンツの見た目でしょう。しかしこの考慮事項には、視覚的に読むわけではない（たとえば、点字ディスプレイや、テキスト読み上げ再生などで読む）ユーザーが多く存在するという観点が欠けています。マークアップからのスタイル分離は、単にCSSを別のファイルに分離するだけでなく、マークアップは全てのユーザーに意味を伝えるものであり、視覚的なレンダリングは一つの使い方にすぎない点を認識することにもなります。

意味付けがしっかりされているマークアップにより、意味のあるスタイル設定が可能になり、 ARIAのrole属性をCSSセレクターとともに使用して、目的に応じてスタイル設定を適用できます。レンダリング時の見た目だけでなく、データの表現方法にも重点が置かれるようになるので、セマンティックなスタイル設定の使用をお勧めします。

製作者がコンテンツに付与したスタイル設定が、必ずしも視覚ユーザーにとって最適なものであるとは限りません。ユーザーは、自分のニーズに合わせて、異なる配色や、コントラストレベルの向上、配置、フォント、行の高さの変更をしたいかもしれません。

このため、習慣として、スタイル情報をマークアップから明確に分離しておくのがよいでしょう。その際、style属性は、ユーザーがドキュメントをリフローしたり、スタイルを変更したりする機能を妨げる可能性があるため、使用しないでください。

CSSのスタイル定義は、HTML5のlink要素を介して、適用先のコンテンツ ドキュメントにリンクできます。複数のスタイルシートをドキュメントに添付して、さまざまなレンダリング媒体をターゲットにしたり、スタイルを機能別にすっきりとグループ化したりもできます。

関連リンク