KDP備忘録【4】CSSと本文

KDP備忘録

ここでは、次の全てに当てはまる人を対象に話を進めます。

(1) 電子書籍の中身となる日本語の原稿（文章データ）がある。

(2) 画像は表紙のみ使用する。

(3) k_airyuuさんのサイト『本好きに送る「電子書籍のつくり方」講座』の内容が理解できる。

CSS

≫ 電子書籍づくり実践(EPUBの構造 xhtmlとcss) - 本好きに送る「電子書籍のつくり方」講座

(　ﾟ∀ﾟ)　スタイルシートは「book-style.css」だけ残したんだね。

(｀ー∇ー´)　必要な部分は他のcssからコピペしたよ。編集後の「book-style.css」のコード見る？

(* ﾟ∀ﾟ)　え、いいの？　フクロウさん太っ腹！


@charset "UTF-8";

/* ファイル情報
****************************************************************
【内容】book-style.css 及び下記のCSSファイルをカスタマイズ
【従前のCSSファイルバージョン】ver.1.1.1
【削除したCSS】style-reset.css,style-standard.css,style-advance.css
【電書協EPUB 3 制作ガイドバージョン】ver.1.1.3
****************************************************************/

/* =============================================================
 * css reset　※style-reset.css より
 * ============================================================= */

 body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  line-height: 1.75;
  background: transparent;

  word-spacing: normal;
  letter-spacing: normal;
  white-space: normal;
  word-wrap: break-word;
  text-align: justify;

  -webkit-line-break: normal;
  -epub-line-break: normal;

  -webkit-word-break: normal;
  -epub-word-break: normal;

  -webkit-hyphens: auto;
  -epub-hyphens: auto;

  -webkit-text-underline-position: under left;
  -epub-text-underline-position: under left;
}
div,p {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}
body,div,p {
  text-indent: 0;
}
body > p,
div > p {
  text-indent: inherit;
}
h1,h2,h3,h4,h5,h6 {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: inherit;
  background: transparent;
}
img {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: baseline;
  background: transparent;
}
a {
  font-style: inherit;
  font-weight: inherit;
  text-decoration: inherit;
  color: inherit;
  background: transparent;
}

/* =============================================================
 * 全作品共通の基本スタイル　※style-standard.css より
 * ============================================================= */
 
/* 組み方向指定
---------------------------------------------------------------- */
/* 横組み用 */
html,
.hltr {
  -webkit-writing-mode: horizontal-tb;
  -epub-writing-mode: horizontal-tb;
}
/* 縦組み用 */
.vrtl {
  -webkit-writing-mode: vertical-rl;
  -epub-writing-mode: vertical-rl;
}

/* html指定
---------------------------------------------------------------- */
/* デフォルトフォントのみ指定 */
html {
  font-family: serif-ja, serif;
}

/* リンク指定
---------------------------------------------------------------- */
/* 横組み：下線　縦組み：右線 */
.hltr a:link,
.hltr a:visited {
  text-decoration: underline;
}
.vrtl a:link,
.vrtl a:visited {
  text-decoration: overline;
}
.hltr a:hover,
.hltr a:focus,
.hltr a:active,
.vrtl a:hover,
.vrtl a:focus,
.vrtl a:active {
	color: #ff6600;
	text-decoration: none;
}
/* リンク文字色（デフォルトは青） */
a:link {
	color: #0000ff;
}
a:visited {
	color: #00aaaa;
}
a:hover,
a:focus,
a:active {
	color: #ff6600;
}

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

/* =============================================================
 * 作品別カスタマイズ領域　※従前のbook-style.cssより
 * ============================================================= */
 
/* 見出しのデフォルト書体指定
---------------------------------------------------------------- */
/* 横組み用 */
.hltr h1 {
  font-family: serif-ja, serif;
}
/* 縦組み用 */
.vrtl h1 {
  font-family: serif-ja-v, serif-ja, serif;
}

/* 表紙
---------------------------------------------------------------- */
body.p-cover {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* 本扉
---------------------------------------------------------------- */
body.p-titlepage .main {
	padding-top: 10%;
	text-align: center;
}
body.p-titlepage .main h1 {
	font-size: 3em;
}
body.p-titlepage .main h2 {
	margin-top: 10%;
	font-size: 2em;
}

/* 目次
---------------------------------------------------------------- */
body.p-toc .main {
	margin: 0 auto;
	padding-top: 10%;
}
body.p-toc .main h1 {
	font-size: 2.5em;
}
body.p-toc .main div {
	margin: 0 2em;
}
body.p-toc .main p {
	margin: 0 .2em;
	font-size: 1.5em;
}

/* 本編
---------------------------------------------------------------- */
body.p-text .main h1{
	margin: 10% 0;
	font-size: 3em;
}
body.p-text .main div {
	margin: 0 3em;
}
body.p-text .main .fin {
	margin-left: 0;
	text-align: right;
}

/* 奥付
---------------------------------------------------------------- */
body.p-colophon {
	text-align: center;
}
body.p-colophon .main {
	margin: 0 auto;
	padding-top: 10%;
	width: 20em;
	text-align: left;
}

(｀ー∇ー´)　スタイルシートとしては極めてシンプル。初めての電子書籍なので必要最低限に。

(　ﾟ∀ﾟ)　これで電子書籍をデザインしてると思うと何だか感動。

(｀◎∇◎´)b　ここで気付いたことを。

1. 縦書きの作品の場合、上下の margin や padding は不要。
→ブラウザでは窮屈ですが、Kindleその他の電子書籍リーダでは十分な余白が表示されます。

2. <ruby></ruby>タグの間に<rb></rb>タグ（Internet Explorer 独自の拡張）を使わない。
→圧縮して電子書籍データにする時にエラーが表示されます。

(；ﾟ∀ﾟ)　使えないHTMLタグもあるんだ……気をつけないと。

本文

(｀ー∇ー´)　ついでに本文ファイルのコードも見る？　無料サンプルの範囲内で。

(* ﾟ∀ﾟ)　見たーい！

(｀ー∇ー´)つ　ほい。


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:epub="http://www.idpf.org/2007/ops"
 xml:lang="ja"
 class="vrtl"
>
<head>
<meta charset="UTF-8"/>
<title>信濃の国は - 河馬追物</title>
<link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
</head>>
<body class="p-text">
<div class="main">

<h1 id="toc-001">信濃の国は</h1>
<div>
<p>　カツオでもマグロでもいい。あの豪快な一本釣りの一匹が勢い余って、遠く信州の我が家まで飛んで来てくれないだろうか。</p>
<p>　家と言っても屋根に墜落して穴が開いては困る。家の西側に広がる田畑は、幸か不幸かその多くが耕作放棄地となっている。遠くに北アルプスを望む長閑な田園に、遠慮なく突き刺さって欲しい。カツオでもマグロでもいい、頭から。</p>
<p>　遥か上空を飛んで来る間には、きっとカチカチに凍っているだろう。くれぐれも航空機には衝突しないで欲しい。バードストライクどころの騒ぎではない。途中何物にもぶつからず信州の無人の大地にめでたく頭から突き刺さったら……カツオやマグロの丸ごと一匹となると、母も私も解体する自信がない。どうしよう。</p>
</div>
<div>
<p>　信州の小学生はランドセルに、防犯ブザーと熊よけ鈴をつける。少なくとも当地では。</p>
……

(三ﾟ∀ﾟ)　……。

(｀ー∇ー´)　（何？　その沈黙は）ちなみにテンプレートの「p-002.xhtml」がベース。

(　ﾟ∀ﾟ)　縦書き文章、挿絵なし？

(；｀＝∇＝´)ゞ　実は、ルナールの『博物誌』を意識したんだけど……。

(　ﾟ∀ﾟ)　ああ、短編にそれぞれ挿絵がついてるやつ。

※ 図書カード：博物誌（ルナール・著 / 岸田国士・訳）| 青空文庫

(｀◎∇◎´)b　前も言ったように今回は短編集で作品自体が短いため、挟み貼り付けツールでマークアップしつつ、同時に推敲も行いましたが……。

(　ﾟ∀ﾟ)　基本は k_airyuuさんみたいに、エディタの検索・置換機能と正規表現を使おうね。

≫ タグ入力の省力化(コピペ) - 本好きに送る「電子書籍のつくり方」講座

≫ タグ入力の省力化(検索置換) - 本好きに送る「電子書籍のつくり方」講座

≫ タグ入力の省力化(正規表現) - 本好きに送る「電子書籍のつくり方」講座

KDP備忘録

遠近遊園

KDP備忘録【4】CSSと本文

CSS

本文