メディアクエリとは、1 つのスタイル シートだけを使用して、特定の Kindle 端末 (または端末グループ) に別のスタイルを適用できるようにする CSS コードのブロックです。 メディアクエリは、コンテンツ制作者が端末間でより快適な読書体験を構築するために実装されました。

Amazon では、コンテンツ制作者に対し、メディアクエリを問題解決や読書体験の向上につながる場合にのみ使用することを推奨しています。たとえば、メディアクエリは次のような場合に使用できます。

• 特定の端末または端末グループでドロップキャップを表示できるようにする。
• タブレット端末上でテキストの元の色を維持しつつ、Kindle 端末で表示のコントラストを明確にするために、明るい色 (黄色、空色、ピンクなど) のテキストを暗い色に変更する。
• 画面サイズの違いに対応するために、Kindle 端末ではタブレット端末よりも固定レイアウトのテキスト ポップアップのフォントのサイズを大きくする。
• タブレットで紙書籍と同等の表示を再現しつつ、Kindle 端末で読みやすさを損なわないようにするため、Kindle 端末上では色付き罫線を表示し、タブレット上では色付き背景を表示する。

このセクションでは、メディアクエリを使用して Kindle 端末、Fire タブレット、iPad での表示をカスタマイズする方法を説明します。この原則は、さまざまな縦横比を持つあらゆる Kindle 端末に適用できます。

注: 一部のメディアクエリは、タイプセッティングの改善が有効な電子書籍と KF8 または Mobi 電子書籍で異なる動作をします。

メディアクエリは W3 規格の一部です。

メディアクエリのガイドライン

コンテンツ制作者が Mobi または KF8 ファイル形式に基づく CSS を使用できるようにするために、amzn-mobi と amzn-kf8 という 2 つのメディア タイプが新たにサポートされています。

• KF8 CSS スタイルには、メディアクエリ @media amzn-kf8 を使用します。これは KF8 フォーマット専用です。
• Mobi CSS スタイルには、メディアクエリ @media amzn-mobi を使用します。これは Mobi フォーマット専用です。

@media screen スタイルと @media all スタイルは、引き続き KF8 と Mobi の両方に適用されます。

正しい CSS 構文を使用する

メディアクエリは、セレクターと宣言ブロックから成ります。 (1) セレクターはメディアクエリの条件を指定する部分で、(2) 宣言ブロックはメディアクエリの条件に一致するときの表示方法を定義する部分です。

以下の例では、本のフォーマットが KF8 で、端末の縦横比が 1280 x 800 の場合にのみ、青い背景が適用されます。

例:

個々のメディアクエリの前に CSS コメントを追加する

ターゲットの端末を明示するために各メディアクエリの前に CSS コメントを追加することをお勧めします(CSS コメントは先頭に「/*」を挿入し、末尾に「*/」を挿入します)。

例:

CSS コメントは、利用者の目に触れることはありませんが、ファイル作業者がコード内を行き来したり、トラブルシューティングをしたりする際に役に立ちます。

非メディアクエリ コードは Kindle 端末用とする

非メディアクエリ (デフォルト) コードには、必ず Kindle 端末 (Kindle Voyage、Kindle Paperwhite を含む) 向けの設定を記述します。デフォルト コードに記述された CSS 値は、端末に一致するメディアクエリがないときの表示に使用されます。

メディアクエリは非メディア クエリ コードの後に記述する

CSS は記述されている順番どおりに適用されるので、複数の端末をターゲットにしているコード (すべての Fire タブレットをターゲットとする device-aspect-ratio コードなど) は、非メディアクエリ コードの後に記述する必要があります。

次の例のデフォルト コードでは、すべての端末上で、blue_background クラスを使用するあらゆる要素に黒い罫線を表示します。その後のメディアクエリでは、Fire タブレットおよび iPad 上で、blue_background クラスを使用するすべての要素の罫線を削除し、青い背景を表示します。これにより、それ以外の端末では黒い罫線のみが表示されるようになります。

例:

この例では、border プロパティをオーバーライドしなかった場合、blue_background クラスのデフォルト コードで定義された黒い罫線が Fire タブレットに適用されます。Fire タブレットおよび iPad のメディア クエリで border プロパティを none に設定すると、これらのプロパティのデフォルト値をオーバーライドできます。この手法は、Kindle 端末をターゲットとする非メディアクエリ コードを使用しつつ、Fire タブレットには色付き罫線の設定を適用したくない場合に役立ちます。

コードの重複を避ける

メディアクエリを記述するときは、その特定の端末で変更する必要がある CSS クラスとコードのみを含めるようにします。非メディアクエリ コードに記述した設定は、メディアクエリでオーバーライドされない限り、自動的にすべての端末に適用されます。そのため、すべての端末に適用したいコードを繰り返し記述する必要はありません。

次に示すのは、Fire タブレットでは色付きの罫線を色付きの背景に置き換える一方で、すべての端末でテキストを赤にするコードの例です。左側の例は、メディアクエリ コード内で .red_font クラスを繰り返していますが、この繰り返しは不要です。

例:

メディアクエリの使用

以下の表で、サポートされているメディアクエリ、および KF8、MOBI その他のリーダーに適用される CSS の例について説明します。

MOBI との後方互換性にメディアクエリを使用する

メディアクエリは、KF8 による 1 つの複雑な CSS ファイルの使用、および Mobi 形式による基本的な CSS の使用を可能にします。以下はガイドラインです。

• 複雑な CSS は @media amzn-mobi メディアクエリで同じクラスを再定義することにより、Mobi 形式用としては無効になります。
• W3C の基準ごとにメディアクエリのスタイルを次のように指定します。
  • 共通の CSS の後に個々のクエリを指定しなければなりません。
    例:
    

    class1 {font-size: 2em;} @media amzn-mobi {.class1 {font-size: 3em;}}

  • 優先を強制するには　!important を各プロパティに含めます。

    例:

    @media amzn-mobi {.class1 {font-size: 3em !important;}} .class1 {font-size: 2em;}

  
  

  CSS	MOBI に適用される CSS のスタイル	KF8 に適用される CSS のスタイル
  p { font-style: normal; } h { font-weight: bold; } div.example { margin: 10px }ul{margin: 20px; padding-left: 30px; } .firstletter { float: left; font-size: 3em; line-height: 1; font-weight: bold; padding-right: .2em; } @media amzn-mobi { .firstletter { float: left; font-size: 3em; line-height: 0; font-weight: bold; padding-right: 0; } }	p { font-style: normal; } h { font-weight: bold; } div.example { margin: 10px }ul{margin: 20px; padding-left: 30px; } .firstletter { float: left; font-size: 3em; line-height: 0; font-weight: bold; padding-right: 0; )	p { font-style: normal; } h { font-weight: bold; } div.example { margin: 10px }ul{margin: 20px; padding-left: 30px; } .firstletter { float: left; font-size: 3em; line-height: 1; font-weight: bold; padding-right: .2em; }

メディアクエリを提出する

メディアクエリを提出するには以下の 4 つのオプションがあります。

• 1 つの CSS ファイル
• 異なる CSS ファイル
• スタイル タグ
• @import

オプション 1: 1つの CSS ファイルを使用する

メディアクエリでは、同一の CSS において、MOBI と KF8 形式で異なる CSS を指定することがあります。以下の例において、MOBI 形式には、同じ CSS ファイル内と他の形式と異なる .class1 クラスが指定されています。

例:

オプション 2: 異なる CSS ファイルを使用する

メディアクエリでは、異なる CSS ファイルで、MOBI と KF8 形式に異なる CSS ファイルを指定することがあります。以下の例では、共通の CSS がすべてのメディアに適用される一方で、MOBI と KF8 形式で異なる CSS のスタイル シートを利用しています。

例:

オプション 3: スタイル タグを使用する

メディアクエリでは、<style> タグを使用して、Mobi と KF8 形式に直接、異なる CSS を指定することができます。

例:

オプション4: @import を使用する

メディアクエリでは、@import を使用して、Mobi と KF8 形式に直接、異なる CSS ファイルを含む異なる CSS を指定することができます。

例:

display:none プロパティをメディア クエリで使用する

MOBI 7 と KF8 形式のコンテンツに異なる CSS を指定するには、メディアクエリと共に display:none プロパティを使用します。

例:

display:none プロパティの使用に関する制約

Kindle では、10,000 文字を超えるコンテンツ ブロックに対する display:none プロパティの使用を制限しています。10,000 文字を超えるコンテンツ ブロックに display:none プロパティが適用されると、Kindle でエラーが発生し、本の出版が妨げられます。