先に知っておきたいこと
EPUBのCSSは、Webと同じ仕組み
EPUB 3.3の仕様は、EPUBがCSSに対応していて、text/cssが、そのまま使える（コアメディアタイプの）資源であることを定めています。HTMLで文章の構造を、CSSで見た目を、と役割を分ける考え方は、Webページと同じです。
読み手の設定で、見た目が変わる前提で作る
EPUB Reading Systems 3.3の仕様は、リーダーが、制作者のスタイルシートを上書きすべきではないとしながら、読み手の操作に応じて、一部を上書きすることがあると書いています。つまり、制作者が指定した見た目が、そのまま出るとは限りません。この前提で、CSSを控えめに書きます。
基本1：単位は、emかパーセンテージ
KDPの日本語ヘルプは、font-size・width・height・margin・padding・text-indentなどに、固定値（ポイント、ピクセルなど）を使わず、さまざまな画面の大きさや解像度に対応できるように、emまたはパーセンテージで指定することを案内しています。
さらに、左右のmarginとpaddingは、emではなくパーセンテージで指定する、とされています。上下はemです。
p {
margin: 0;
text-indent: 1em; /* 段落の先頭を1字下げる */
}
h2 {
margin: 2em 0 1em; /* 上下はem */
}基本2：本文の文字サイズと行間は、指定しない
KDPの日本語ヘルプは、本文には、既定の文字サイズ（1em）と行間を使うように案内しています。本文に、font-sizeやline-heightは使わないでください、とも書かれています。見出しや脚注などでは、個性のあるスタイルを使えますが、本文には勧められていません。
そのため、本文にline-height: 1.8のような指定を入れるのは、KDPで出す本では避けたほうが無難です。行間の好みは、読み手が、リーダーの設定で変えられます。
h1 {
font-size: 1.6em; /* 見出しは、相対値で大きくする */
text-align: center;
}基本3：画像は、画面の幅に収める
画像が画面からはみ出さないよう、最大幅を100%にします。
img {
max-width: 100%;
height: auto;
}基本4：フォントの埋め込みは、慎重に
EPUB 3.3の仕様では、TrueType、OpenType、WOFF、WOFF2が、そのまま使える資源として挙げられています。一方、KDPの日本語ヘルプでは、リフロー型の本で使えるフォントとして、OpenType（OTF）とTrueType（TTF）が案内されています。KDPで出すなら、KDPの案内に合わせてください。
また、細いフォントは読みにくく、文字と背景のコントラストに影響することがある、とKDPのヘルプに書かれています。フォントを埋め込むときは、そのフォントのライセンスで、電子書籍への埋め込みが許可されているかも、確認が必要です。
基本5：CSSは、すべての章から読み込む
CSSファイルは、各章のHTML（XHTML）から、link要素で読み込みます。EPUBに含めるファイルは、パッケージ文書の一覧（マニフェスト）に登録します。登録の書き方は、content.opfの書き方｜タグと属性の意味を整理で扱います。
<link rel="stylesheet" type="text/css" href="../styles/style.css"/>hrefは、読み込む側のHTMLからの相対パスです。章ごとにCSSが違うと、見た目がそろわなくなるため、全章で同じCSSを読み込むのが基本です。
基本6：縦書きは、writing-modeで指定する
縦書きにするには、writing-modeプロパティを使います。vertical-rlが、右から左へ行が進む縦書きです。MDNによると、writing-modeは2017年3月以降、すべての主要なブラウザーで利用できます。ただし、EPUBでは、リーダーの対応を別に確認する必要があります。詳しくは、縦書きEPUBのCSS｜ルビ・縦中横・傍点の書き方を参照してください。
避けたい書き方
- 固定値の多用： ピクセルやポイントでの指定は、読み手の文字サイズの変更と合わないことがある
- 本文の文字サイズ・行間の指定： KDPのヘルプで、本文には使わないよう案内されている
- 複雑な指定： リーダーによって解釈が変わる可能性が増える。この記事の確認時点で、個別のリーダーの対応を比べた公式の一覧は確認できていません
結論：控えめに書き、複数の環境で確かめる
| 項目 | 考え方 | 根拠 |
|---|---|---|
| 単位 | emかパーセンテージ。左右の余白はパーセンテージ | KDPヘルプ |
| 本文の文字サイズ・行間 | 指定せず、既定のまま | KDPヘルプ |
| 画像 | 最大幅100% | 一般的な書き方 |
| フォント | KDPならOTF・TTF。ライセンスを確認 | KDPヘルプ、EPUB 3.3 |
| 全体 | 読み手の設定で変わる前提で、控えめに | EPUB Reading Systems 3.3 |
よくある質問
Webで使っているCSSを、そのまま使えますか？
EPUBはCSSに対応していますが、リーダーによって、解釈や初期の見た目が違います。そのまま使うと、意図どおりに出ない場合があります。Kindle Previewerやリーダーで確認してください。
行間を広げたいのですが、どうすればよいですか？
KDPのヘルプでは、本文の行間を指定しないよう案内されています。読み手が、リーダーの設定で変えられます。
CSSは、どのファイルに書けばよいですか？
独立した.cssファイルにまとめ、各章から読み込む方法が基本です。コピーして使える例は、リフロー型EPUBのCSSテンプレート｜横書き・縦書きの例にまとめています。