このページに記載されているCSSプロパティは、コンテンツを視覚的にレンダリングするEPUB3ユーザーエージェントによってサポートされることが期待されますが、必須ではありません。ここに記載されていないプロパティも引き続き使用できます(例えば、進化するCSS3モジュールから)が、コンテンツ製作者は、このようなプロパティを使用する場合には、レンダリングとアクセシビリティへの影響を慎重に評価する必要があります。

CSS 2.1

プロパティ 考慮事項
background

backgroundプロパティは、一つ以上のプロパティを定義するための省略形です。潜在的な問題については、個々のbackground-*プロパティを参照してください。

現時点では、固定レイアウト以外では、EPUB3では背景プロパティはほとんどサポートされていないことに注意してください。

background-attachment
background-color
  • テキストの色と十分なコントラストを確保してください。
background-image
  • コンテンツの色(テキストとグラフィック)との十分なコントラストを確保してください。
  • 画像内のグラデーションや色の混合率が高いと、重ねられたテキストが読みにくくなることがあります。
background-position
background-repeat
これらのborderプロパティは、一つ以上のプロパティを定義するための省略形です。問題については、各border-*プロパティを参照してください。
border-collapse
  • 要素の枠線の色は、そのコンテンツの性質に関する情報を伝える唯一の手段であってはなりません。色情報ページを参照してください。
border-spacing
  • 色を使って意味を伝える場合は、枠線を視覚的なユーザーが色を識別できる太さにしてください。
  • EPUBにおける絶対位置と固定位置に対しての、ユーザーエージェントのサポートは保証されていません。
  • コンテンツは、視力の弱いユーザーや拡大ソフトウェアを使用しているユーザーにとって見つけにくいような配置にしないでください。
caption-side
clear
clip
  • Web上で支援技術のユーザーのみを対象としたコンテンツを非表示にするためにコンテンツを1ピクセルにクリッピングすることがあります。しかし、EPUBリーディングシステムでは、この手法のサポートには一貫性がありません。一部のリーディングシステムでは、非表示のコンテンツが表示されることを想定してください。
color
  • テキストやグラフィックコンテンツに色を付ける際の考慮事項については、色情報ページを参照してください。
content
cursor
  • クリックできる要素が区別できなくなるようなカーソルの変更はしないでください。
direction
  • EPUB3ではdirectionプロパティはサポートされていません。方向を表現するには<a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-bdi-element" >bdi</a>要素や<a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-bdo-element" >bdo</a>要素、<a href="https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute">dir</a>属性などのHTML5マークアップを使用してください。
display
  • displayプロパティの値をnoneに設定すると、要素は視覚的にも支援技術に対してもレンダリングされなくなります。これは、支援技術によってレンダリングされるべきコンテンツを視覚表示から隠すためのメカニズムではありません。
empty-cells
  • HTM5の表では、枠線がレンダリングされるため、 empty-cellsプロパティを設定する必要はありません(ダッシュや改行なしスペースなどのプレースホルダーテキストを挿入しないでください)。
  • EPUB2ユーザーエージェントとの前方互換性を保つために、空のセルの周囲に表の枠線が描画されるように、プロパティをshowの値に設定する必要があります。
float
  • 視力の弱いユーザーや拡大ソフトウェアを使用しているユーザーが発見しにくいような方法で要素をフロート表示しないようにしてください。
  • フロートされたコンテンツの周囲に十分な余白を確保し、周りのコンテンツと明確に区別できるようにします。
  • 主要コンテンツを右にフロートする場合、フロートのためにマークアップで配置しないようにしてください(つまり、非視覚的な再生コンテキストで意味をなすように、論理的な読み取りポイントで再生できるようにします)。
font fontプロパティは、一つ以上のプロパティを定義するための省略形です。問題については、各font-*プロパティを参照してください。
font-family
  • 大文字の「I」、小文字の「L」、数字の「1」を同一(またはほぼ同一)の文字として表すサンセリフフォント(例えばArial)など、文字の区別が十分に行えないフォントの使用は避けてください。
  • ユーザーが判読しにくい筆記体や装飾の多いフォントは避けてください。
  • 出版物で使用するフォントの数を制限し、一貫したフォントファミリーを使用するようにしてください(例:見出しに一種類のフォント、本文に一種類のフォント)
  • 文字間のカーニングが十分なフォントを優先します。
font-size
  • スケーリングを容易にするために、パーセンテージやemなどの相対的なサイズを使用します。
  • デフォルトのフォントサイズが文章の読みやすさに影響しないようにします(例:x-smallxx-smallおよび同等のフォントサイズを指定しないでください)。
font-style
  • CSSを使用して斜体にするのは装飾目的の場合のみにしてください(i要素と同様)。単語を強調したい場合はemタグを使用してください。
  • イタリック体は読みにくい場合があるので、装飾的なイタリック体は多用しないでください。
font-variant
font-weight
  • CSSを使用して太字にするのは装飾目的に限定してください。単語を強調する場合はstrongタグを使用し、キーワードにはbを使用してください。
  • 太字はローマン体よりも読みにくい場合があるので、装飾的な太字の多用は避けてください。
height
  • 支援技術では通常、要素の高さや幅が0に設定されているコンテンツは無視されますが、だからといって非視覚的な再生のみを目的としたコンテンツを、非表示にするためにこのプロパティを使用しないでください。
letter-spacing
  • letter-spacingプロパティを使用すると、文字間のカーニングを増やし、密に構成されたフォントを読みやすくできます。
  • 一文字ずつ綴りを読み上げる意図がない単語の文字間に空白は追加しないでください。文字間のスペースが必要な場合は、このプロパティを使用して視覚的にスペースを広げます。
line-height
  • 行の高さを変更するときは注意してください。行の高さを少し広げると全体的な読みやすさが向上しますが、行間のスペースが広すぎると逆に読みにくくなる可能性があります(例:段落を区別しにくくなる)。
  • コンテンツを圧縮するために行の高さを狭めないようにしてください。
list-style list-styleプロパティは、一つ以上のプロパティを定義するための省略形です。詳細については、各list-style-*プロパティを参照してください。
list-style-image
  • リストの意味を伝えるための画像使用は避けてください。画像が項目の理解に重要ならば、リストにセマンティックに関する記載を追加し意味が伝わるようにしてください。リストが図や補足の場合は、適切なコンテナ要素を使用してキャプションを加えてください。
list-style-position
list-style-type
  • list-style-typeプロパティを使用してリストの性質を変更しないでください(例:順序なしリストに順序があるように見せるためにプロパティを使用しない)。
  • 余白を変更してコンテンツを画面外に移動することは、Webでは一般的ですが、EPUBユーザーエージェントでは動作が保証されていません。この方法は、ユーザーの好みの読み方向とコンテンツの配置によっては問題を引き起こすことも知られています。
  • アウトラインは枠線を囲み、同様の機能を果たします。それぞれの問題は同じです。詳細については、それぞれの枠線のプロパティを参照してください。
  • 枠線とアウトラインの両方を使用する場合は、両方が視覚的に情報を伝えるのであれば、それらの間に十分なコントラストが維持されるようにしてください。
overflow
  • 拡大したときなどに、コンテンツが表示されない可能性があるため、hidden値は使用しないでください。
position
  • 絶対配置を、マークアップでレイアウトされているのと違う順序でコンテンツを再配置する目的では使用しないでください。
  • 視力の弱いユーザーや拡大ソフトウェアを使用しているユーザーが発見しにくくなるので、絶対位置に要素を配置しないでください。
quotes
table-layout
text-align
  • 単語間の間隔が不均等になると、一部の人にとっては読みにくくなるので、テキストは両端揃えにしないでください。
text-decoration
  • 意味的に削除されたテキストであることを示すにはdel要素を使用します。
text-indent
  • インデントに大きな負の値を使用して、支援技術用のテキストを隠すことがありますが、余白の負の値と同様に、この手法はEPUBユーザーエージェントではあてにできず、ユーザーの好みのテキスト方向によっては問題が発生する可能性があります。
text-transform
  • 単語が区別しにくくなったり、読みにくくなる可能性があるため、大文字を装飾的に多用しないようにしてください。
unicode-bidi
  • EPUB 3では、unicode-bidiプロパティはサポートされていません。テキストの記述方向を表現するには、<a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-bdi-element" >bdi</a>要素、<a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-bdo-element" >bdo</a>要素、<a href="https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute">dir</a>属性などのHTML5マークアップを使用する必要があります。
vertical-align
visibility
  • 非表示のコンテンツは支援技術では利用できないので、読み上げ用のコンテンツを視覚的なレンダリングから隠す目的ではこのプロパティを使用しないでください。
white-space
width
  • 支援技術では通常、要素の幅や高さが0に設定されているコンテンツは無視されます。非視覚的な再生のみを目的としたコンテンツを、非表示にするためにこのプロパティを使用しないでください。
word-spacing
  • 単語間隔を広げると、密に構成されたフォントの読みやすさが向上します。
  • 単語間のスペースを増やすには、複数のノン ブレイキング スペースを追加するより、このプロパティを使用してください。
z-index
  • azimuth
  • cue
  • cue-after
  • cue-before
  • elevation
  • pause
  • pause-after
  • pause-before
  • pitch
  • pitch-range
  • play-during
  • richness
  • speak
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • stress
  • voice-family
  • volume

CSS 2.1 疑似クラス(Pseudo-Classes)

疑似クラス 考慮事項
:active
:first-child
:focus
:hover :hover疑似セレクターはデバイスに依存し、多くのユーザーが有効化できないかもしれないので、使用しないでください。
:lang
:visited

CSS 2.1 疑似要素(Pseudo-Elements)

擬似要素 考慮事項
:before
and
:after
  • 支援技術は通常、IE 11およびEdgeブラウザを除き、 :before:afterの疑似要素を使用して挿入されたテキストを読み上げます。
  • 期待される動作は、挿入されたテキストが読み上げられることなので、装飾目的では疑似要素を使用しないでください。
  • CSSのサポートがないユーザーは、挿入されたテキストにアクセスできません。
:first-letter
:first-line