リフロー型EPUBのCSSテンプレート｜横書き・縦書きの例

先に知っておきたいこと

このCSSは、この記事のために新しく書いた例

元になった特定のテンプレートはありません。KDPの日本語ヘルプ（リフロー型のテキストのガイドライン）と、W3Cの仕様で確認できた内容に沿って書いています。

本文の文字サイズと行間は、指定しない

KDPのヘルプは、本文には既定の文字サイズ（1em）と行間を使い、font-sizeやline-heightは使わないよう案内しています。そのため、この例のbodyとpには、文字サイズと行間の指定を入れていません。

動作は、使う前に確認する

この例は、仕様で定義されたプロパティだけで書いています。ただし、実際のリーダーでの表示は確認していません。この記事の確認時点で、リーダー別の対応を比べた公式の情報は確認できていません。使う前に、Kindle Previewerとお使いのリーダーで確認してください。

横書き用の例

/* 本文 */
body {
  margin: 0;
}

p {
  margin: 0;
  text-indent: 1em;      /* 段落の先頭を1字下げる */
}

/* 見出し */
h1 {
  font-size: 1.6em;
  text-align: center;
  margin: 2em 0 1em;
}

h2 {
  font-size: 1.3em;
  margin: 1.5em 0 0.5em;
}

h3 {
  font-size: 1.1em;
  margin: 1.2em 0 0.4em;
}

/* 見出しの直後の段落は字下げしない */
h1 + p,
h2 + p,
h3 + p {
  text-indent: 0;
}

/* 強調 */
strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

/* リスト */
ul,
ol {
  margin: 1em 0;
  padding-left: 5%;
}

/* 引用 */
blockquote {
  margin: 1em 5%;
}

/* 画像 */
img {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 1em 0;
  text-align: center;
}

figcaption {
  font-size: 0.9em;
}

/* 表 */
table {
  border-collapse: collapse;
  margin: 1em 0;
}

th,
td {
  border: 1px solid #888;
  padding: 0.3em 1%;
}

/* 脚注 */
aside {
  font-size: 0.9em;
}

縦書き用の例

横書き用との違いは、冒頭のhtmlと、ルビ・縦中横・傍点の指定です。

html {
  writing-mode: vertical-rl;   /* 縦書き。行は右から左へ進む */
}

body {
  margin: 0;
}

p {
  margin: 0;
  text-indent: 1em;
}

h1 {
  font-size: 1.6em;
  margin: 0 3%;
}

h2 {
  font-size: 1.3em;
  margin: 0 2%;
}

h1 + p,
h2 + p {
  text-indent: 0;
}

/* ルビ */
ruby {
  ruby-position: over;         /* 縦書きでは文字の右 */
}

/* 縦中横 */
.tcy {
  text-combine-upright: all;
}

/* 傍点 */
.bouten {
  text-emphasis-style: sesame;
  text-emphasis-position: over right;
}

/* 画像 */
img {
  max-width: 100%;
  height: auto;
}

/* 脚注 */
aside {
  font-size: 0.9em;
}

縦書きの本では、dc:languageをjaにし、spineにpage-progression-direction="rtl"を指定します。KDPで出すなら、投稿時に読む方向（縦書き：右から左）を選びます。くわしくは、縦書きEPUBのCSS｜ルビ・縦中横・傍点の書き方を参照してください。

使い方

1. CSSをファイル（例：styles/style.css）として保存する
2. すべての章のXHTMLから、link要素で読み込む
3. パッケージ文書のmanifestに、CSSファイルを登録する（content.opfの書き方｜タグと属性の意味を整理を参照）
4. Kindle Previewerと、お使いのリーダーで確認する

<link rel="stylesheet" type="text/css" href="../styles/style.css"/>

書き換えるときのポイント

• 見出しの大きさ： 1.6emなどの数値を変える。ピクセルやポイントで指定しない
• 段落の間隔： 小説は、段落の間を空けず字下げで区切るのが一般的。実用書は、pにmargin: 0.8em 0;のように、上下の余白を付ける方法がある
• 画像が多い本： imgのmax-widthはそのままにして、必要ならfigureの余白を変える
• 色： 色の指定は、読み手の設定で変わることがある。必要なものにとどめる

結論：最小の指定から始めて、増やす

よくある質問

このCSSは、ダウンロードできますか？

このサイトでは、記事の中に例を載せています。ファイルでの配布は、今のところ行っていません。

行間を広げたいのですが、指定してよいですか？

KDPのヘルプでは、本文の行間は指定しないよう案内されています。読み手が、リーダーの設定で変えられます。