目次

チェック項目　７-１　「各形式の画像が表示できているか」

チェック項目　７-３　「SVG画像が表示できているか」

チェック項目　７-５　「高画素数の画像が表示できているか」

チェック項目　７-５　「本文内画像（１ページ大）がきちんと表示できているか」／「画像が拡大表示できるか」（通常のリフロー）

チェック項目　７-５　「本文内画像（１ページ大）がきちんと表示できているか」／「画像が拡大表示できるか」（フィックスドハイブリッド）

チェック項目　７-５　「画像が裁ち切り配置で表示されるか（フィックスドハイブリッド指定の場合）」

チェック項目　７-５　「２ページにまたがる見開き画像が切れ目なく表示されるか（フィックスドハイブリッド指定の場合）」

チェック項目　７-７　「画像の配置位置指定が反映されているか」

チェック項目　７-９　「画像サイズ指定が反映されているか／表示が正常か」

チェック項目　７-10　「キャプションをテキストとして挿入した場合に画像との分離禁止指定が反映されているか」

チェック項目　７-11　「背景画像がきちんと表示されているか」

チェック項目　７-12　「テキストの画像回り込みがきちんと再現されているか」

チェック項目　７-13　「画像の代替テキストがテキスト検索の対象になるか／画像の代替テキストが音声読み上げの対象になるか」

チェック項目　７-１　「各形式の画像が表示できているか」

（画像が透過しているかどうかを確認するために、ＲＳ側で背景色を変えてチェックすること。）

ＪＰＥＧ（ＲＧＢ）

ＪＰＥＧ（グレースケール）

ＰＮＧ（ＲＧＢ）

ＰＮＧ（ＲＧＢ／背景透過）

ＰＮＧ（インデックスカラー）

ＰＮＧ（インデックスカラー／背景透過）

ＧＩＦ（インデックスカラー）

ＧＩＦ（インデックスカラー／背景透過）

チェック項目　７-３　「SVG画像が表示できているか」

通常の画像として挿入

チェック項目　７-５　「高画素数の画像が表示できているか」

２０１４年11月現在、ibookstoreおよび楽天koboで画素数の制限がある。このチェックファイルの画像が表示できたとしても、ストア販売前のチェックでハネられるケースがあるので注意。

チェック項目　７-５　「本文内画像（１ページ大）がきちんと表示できているか」／「画像が拡大表示できるか」（通常のリフロー）

チェック項目　７-５　「本文内画像（１ページ大）がきちんと表示できているか」／「画像が拡大表示できるか」（フィックスドハイブリッド）

チェック項目　７-５　「画像が裁ち切り配置で表示されるか（フィックスドハイブリッド指定の場合）」

チェック項目　７-５　「２ページにまたがる見開き画像が切れ目なく表示されるか（フィックスドハイブリッド指定の場合）」

チェック項目　７-７　「画像の配置位置指定が反映されているか」

縦組み

画像を画面上に配置

例：

<div class="height-030per block-align-top">

<p><img class="fit" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

例：

<div class="height-6em block-align-top">

<p><img class="fit" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

例：

<div class="align-left">

<p><img class="fit height-6em" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

画像を画面中央に配置

例：

<div class="height-030per block-align-middle">

<p><img class="fit" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

例：

<div class="height-6em block-align-middle">

<p><img class="fit" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

例：

<div class="align-center">

<p><img class="fit height-6em" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

画像を画面下に配置

例：

<div class="height-030per block-align-bottom">

<p><img class="fit" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

例：

<div class="height-6em block-align-bottom">

<p><img class="fit" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

例：

<div class="align-right">

<p><img class="fit height-6em" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

横組み

画像を画面左に配置

例：

<div class="width-030per block-align-top">

<p><img class="fit" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

例：

<div class="width-6em block-align-top">

<p><img class="fit" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

例：

<div class="align-left">

<p><img class="fit height-6em" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

画像を画面中央に配置

例：

<div class="width-030per block-align-center">

<p><img class="fit" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

例：

<div class="width-6em block-align-center">

<p><img class="fit" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

例：

<div class="align-center">

<p><img class="fit height-6em" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

画像を画面右に配置

例：

<div class="width-030per block-align-right">

<p><img class="fit" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

例：

<div class="width-6em block-align-right">

<p><img class="fit" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

例：

<div class="align-right">

<p><img class="fit height-6em" src = "../image/patternimage01.jpg" alt = "image" /></p>

</div>

チェック項目　７-９　「画像サイズ指定が反映されているか／表示が正常か」

縦

divタグへのサイズ指定記入

例：

<div class="height-020per">

<p><img class="fit" src = "../image/photo01.jpg" alt = "写真" /></p>

</div>

高さ20％

高さ50％

高さ2ｅｍ

高さ5ｅｍ

高さ40ｅｍ

高さ最大20％

高さ最大50％

高さ最大2ｅｍ

高さ最大5ｅｍ

高さ最大40ｅｍ

横幅20％

横幅50％

横幅2ｅｍ

横幅5ｅｍ

横幅40ｅｍ

横幅最大20％

横幅最大50％

横幅最大2ｅｍ

横幅最大5ｅｍ

横幅最大40ｅｍ

最大サイズ20％

最大サイズ50％

最大サイズ2ｅｍ

最大サイズ5ｅｍ

最大サイズ40ｅｍ

divタグへのサイズ指定記入（object-fitを使用）

例：

<div class="height-020per">

<p><img class="fit objfit-contain" src = "../image/photo01.jpg" alt = "写真" /></p>

</div>

高さ20％

高さ50％

高さ2ｅｍ

高さ5ｅｍ

高さ40ｅｍ

高さ最大20％

高さ最大50％

高さ最大2ｅｍ

高さ最大5ｅｍ

高さ最大40ｅｍ

横幅20％

横幅50％

横幅2ｅｍ

横幅5ｅｍ

横幅40ｅｍ

横幅最大20％

横幅最大50％

横幅最大2ｅｍ

横幅最大5ｅｍ

横幅最大40ｅｍ

最大サイズ20％

最大サイズ50％

最大サイズ2ｅｍ

最大サイズ5ｅｍ

最大サイズ40ｅｍ

pタグへのサイズ指定記入

例：

<p class="height-020per"><img class="fit" src = "../image/photo01.jpg" alt = "写真" /></p>

高さ20％

高さ50％

高さ2ｅｍ

高さ5ｅｍ

高さ40ｅｍ

高さ最大20％

高さ最大50％

高さ最大2ｅｍ

高さ最大5ｅｍ

高さ最大40ｅｍ

横幅20％

横幅50％

横幅2ｅｍ

横幅5ｅｍ

横幅40ｅｍ

横幅最大20％

横幅最大50％

横幅最大2ｅｍ

横幅最大5ｅｍ

横幅最大40ｅｍ

最大サイズ20％

最大サイズ50％

最大サイズ2ｅｍ

最大サイズ5ｅｍ

最大サイズ40ｅｍ

imageタグへのサイズ指定記入

<p><img class="fit height-020per" src = "../image/photo01.jpg" alt = "写真" /></p>

高さ20％

高さ50％

高さ2ｅｍ

高さ5ｅｍ

高さ40ｅｍ

高さ最大20％

高さ最大50％

高さ最大2ｅｍ

高さ最大5ｅｍ

高さ最大40ｅｍ

横幅20％

横幅50％

横幅2ｅｍ

横幅5ｅｍ

横幅40ｅｍ

横幅最大20％

横幅最大50％

横幅最大2ｅｍ

横幅最大5ｅｍ

横幅最大40ｅｍ

最大サイズ20％

最大サイズ50％

最大サイズ2ｅｍ

最大サイズ5ｅｍ

最大サイズ40ｅｍ

横

divタグへのサイズ指定記入

例：

<div class="height-020per">

<p><img class="fit" src = "../image/photo01.jpg" alt = "写真" /></p>

</div>

高さ20％

高さ50％

高さ2ｅｍ

高さ5ｅｍ

高さ40ｅｍ

高さ最大20％

高さ最大50％

高さ最大2ｅｍ

高さ最大5ｅｍ

高さ最大40ｅｍ

横幅20％

横幅50％

横幅2ｅｍ

横幅5ｅｍ

横幅40ｅｍ

横幅最大20％

横幅最大50％

横幅最大2ｅｍ

横幅最大5ｅｍ

横幅最大40ｅｍ

最大サイズ20％

最大サイズ50％

最大サイズ2ｅｍ

最大サイズ5ｅｍ

最大サイズ40ｅｍ

divタグへのサイズ指定記入（object-fitを使用）

例：

<div class="height-020per">

<p><img class="fit objfit-contain" src = "../image/photo01.jpg" alt = "写真" /></p>

</div>

高さ20％

高さ50％

高さ2ｅｍ

高さ5ｅｍ

高さ40ｅｍ

高さ最大20％

高さ最大50％

高さ最大2ｅｍ

高さ最大5ｅｍ

高さ最大40ｅｍ

横幅20％

横幅50％

横幅2ｅｍ

横幅5ｅｍ

横幅40ｅｍ

横幅最大20％

横幅最大50％

横幅最大2ｅｍ

横幅最大5ｅｍ

横幅最大40ｅｍ

最大サイズ20％

最大サイズ50％

最大サイズ2ｅｍ

最大サイズ5ｅｍ

最大サイズ40ｅｍ

pタグへのサイズ指定記入

例：

<p class="height-020per"><img class="fit" src = "../image/photo01.jpg" alt = "写真" /></p>

高さ20％

高さ50％

高さ2ｅｍ

高さ5ｅｍ

高さ40ｅｍ

高さ最大20％

高さ最大50％

高さ最大2ｅｍ

高さ最大5ｅｍ

高さ最大40ｅｍ

横幅20％

横幅50％

横幅2ｅｍ

横幅5ｅｍ

横幅40ｅｍ

横幅最大20％

横幅最大50％

横幅最大2ｅｍ

横幅最大5ｅｍ

横幅最大40ｅｍ

最大サイズ20％

最大サイズ50％

最大サイズ2ｅｍ

最大サイズ5ｅｍ

最大サイズ40ｅｍ

imageタグへのサイズ指定記入

<p><img class="fit height-020per" src = "../image/photo01.jpg" alt = "写真" /></p>

高さ20％

高さ50％

高さ2ｅｍ

高さ5ｅｍ

高さ40ｅｍ

高さ最大20％

高さ最大50％

高さ最大2ｅｍ

高さ最大5ｅｍ

高さ最大40ｅｍ

横幅20％

横幅50％

横幅2ｅｍ

横幅5ｅｍ

横幅40ｅｍ

横幅最大20％

横幅最大50％

横幅最大2ｅｍ

横幅最大5ｅｍ

横幅最大40ｅｍ

最大サイズ20％

最大サイズ50％

最大サイズ2ｅｍ

最大サイズ5ｅｍ

最大サイズ40ｅｍ

チェック項目　７-10　「キャプションをテキストとして挿入した場合に画像との分離禁止指定が反映されているか」

（画像とキャプションが泣き別れになっていないかどうかを見る）

キャプション入る

キャプション入る

チェック項目　７-11　「背景画像がきちんと表示されているか」

（background-image）

divタグへの背景イメージ指定

例：

<div class="bgimage">

<p><br /></p>

<p>背景に画像イメージ入る</p>

<p><br /></p>

</div>

（ＣＳＳに　.bgimage {background-image: url("../image/bgimage.jpg")}　を追記）

背景に画像イメージ入る

pタグへの背景イメージ指定

例：

<p class="bgimage">背景に画像イメージ入る</p>

（ＣＳＳに　.bgimage {background-image: url("../image/bgimage.jpg")}　を追記）

背景に画像イメージ入る

spanタグへの背景イメージ指定

例：

<p><span class="bgimage">　背景　</span>に画像イメージ入る</p>

（ＣＳＳに　.bgimage {background-image: url("../image/bgimage.jpg")}　を追記）

　背景　に画像イメージ入る

チェック項目　７-12　「テキストの画像回り込みがきちんと再現されているか」

（RS側でフォントサイズを変えてチェックすること。）

縦

行頭方向

例：

<div class="float-left p-bottom-1em">

<p><img class="fit" src = "../image/photo04.jpg" alt = "photo" /></p>

</div>

（中略）

<div class="float-clear" />

本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る

行末方向

例：

<div class="float-right p-top-1em">

<p><img class="fit" src = "../image/photo04.jpg" alt = "photo" /></p>

</div>

（中略）

<div class="float-clear" />

本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る

横

行頭方向

例：

<div class="float-left p-right-1em">

<p><img class="fit" src = "../image/photo04.jpg" alt = "photo" /></p>

</div>

（中略）

<div class="float-clear" />

本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る

行末方向

例：

<div class="float-right p-left-1em">

<p><img class="fit" src = "../image/photo04.jpg" alt = "photo" /></p>

</div>

（中略）

<div class="float-clear" />

本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る

チェック項目　７-13　「画像の代替テキストがテキスト検索の対象になるか／画像の代替テキストが音声読み上げの対象になるか」

チェッカーテストサンプル7-X-X

三陽社メディア開発室／電書ラボ