メディア クエリとは、1 つのスタイル シートのみを使用する特定の Kindle 端末 (または端末グループ) に別のスタイルを適用するために利用できる CSS コード ブロックです。メディア クエリを利用することで、コンテンツ制作者はどの種類の端末にもより良いカスタマー エクスペリエンスを提供できるようになります。

メディア クエリは、問題を解決するため、またはより良いカスタマー エクスペリエンスを提供するという目的のためにのみ使用することをお勧めします。たとえば、メディア クエリは次のような場合に使用できます。

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

このセクションでは、メディア クエリを使用して 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 コメントは、利用者の目に触れることはありませんが、ファイル作業者がコード内を行き来したり、トラブルシューティングをしたりする際に役に立ちます。

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

非メディア クエリ (デフォルト) コードには、必ず 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 プロパティを使用します。Mobi 7 の display:none プロパティは KindleGen 2.4 以降のバージョンで使用できます。

例:

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

Kindle では、10,000 文字を超えるコンテンツ ブロックには display:none プロパティは使用できません。display:none プロパティを 10,000 文字を超えるコンテンツ ブロックに適用すると、KindleGen でエラーが表示されます。