説明#
インターネットからダウンロードしたほとんどの EPUB 電子書籍は、レイアウトが乱れていて見栄えが悪いため、良い読書体験を得るために、いくつかのシンプルな CSS スタイルを作成しました。これらのスタイルは、基本的なレイアウトを規定し、シンプルで読みやすさを追求しています。
全体スタイル#
この部分のスタイルは、EPUB 電子書籍のレイアウトにおけるすべてのデフォルト属性を規定しています。リンクスタイル、配置方法、テキスト間隔など。
一般スタイル
/* テキスト主体の統一スタイル */
.body {
display: block; /* ブロック要素を表示 */
text-align: left; /* テキストを左揃え */
text-align: justify; /* テキストを両端揃え */
padding: 0 0 0 0; /* 内側の余白 */
margin: 0 5pt 0 5pt; /* 上右下左の外側の余白 */
}
/* リンクスタイル */
a {
color: #000000; /* リンクの色を青から黒に変更 */
text-decoration: none; /* リンクの下線を削除 */
}
印刷スタイル
/* 印刷テキストスタイル */
@page {
margin-bottom: 5pt;
margin-top: 5pt;
}
/* 印刷カバーのスタイル */
@page {
padding: 0;
margin: 0;
}
目次の例#
この部分のスタイルは、EPUB 電子書籍に埋め込まれた目次のレイアウトを規定しています。
/* 第一階層目次、単一階層目次もこのスタイルを使用 */
.catalog1 {
font-size: 100%; /* フォントサイズ */
line-height: 125%; /* 行の高さ */
margin: 0.5em 0 0.5em 0; /* 上右下左の外側の余白 */
}
/* 第二階層目次 */
.catalog2 {
font-size: 100%;
line-height: 125%;
margin: 0.2em 0 0.2em 2em;
}
/* 第三階層目次 */
.catalog3 {
font-size: 100%;
line-height: 125%;
margin: 0.2em 0 0.2em 4em;
}
<p class="catalog1"><a href="LUOMO01.html#Chapter001">1. 第一章</a></p>
<p class="catalog2"><a href="LUOMO01.html#Chapter002">1.1 第一節</a></p>
<p class="catalog3"><a href="LUOMO01.html#Chapter003">1.1.1 第一講</a></p>
タイトルの例#
この部分のスタイルは、EPUB 電子書籍のタイトルのレイアウトを規定しています。
/* タイトルスタイル */
.title {
line-height: 125%; /* 行の高さ */
font-weight: bold; /* テキストを太字に */
font-size: x-large; /* フォントを大きく */
margin-top: 0; /* 上の外側の余白 */
padding: 5px 5px 5px 5px; /* 内側の余白 */
border-style: none none none solid; /* 要素の境界線 */
border-width: 0px 0px 0px 10px; /* 境界線の幅 */
border-color: #000000; /* 境界線の色 */
}
<h1 id="Chapter001" class="title">1. 第一章</h1>
<h1 id="Chapter002" class="title">1.1 第一節</h1>
<h1 id="Chapter003" class="title">1.1.1 第一講</h1>
本文の例#
この部分のスタイルは、EPUB 電子書籍の本文のレイアウトを規定しています。
/* 本文スタイル */
.mainbody {
font-size: 100%; /* フォントサイズ */
line-height: 120%; /* 行の高さ */
text-indent: 2em; /* 最初の行のテキストのインデント */
margin: 0.3em 0 0.3em 0em; /* 上右下左の外側の余白 */
}
<p class="mainbody">本文の例01</p>
<p class="mainbody">本文の例02</p>
<p class="mainbody">本文の例03</p>
強調文字#
この部分のスタイルは、EPUB 電子書籍のさまざまな強調文字のレイアウトを規定しています。この部分のスタイルは、必要に応じてフォントサイズ、色などの属性を変更して、必要な読書体験を得ることができます。
/* 強調フォント、色は必要に応じて変更可能 */
.emphasize {
color: #ff0000; /* フォントの色 */
font-size: 90%; /* フォントサイズ */
font-weight: bold; /* テキストを太字に */
text-indent: 0; /* 最初の行のテキストのインデントを解除 */
}
<br/>
<p class="emphasize">強調文字の例
<br/>
強調文字の例
<br/>
強調文字の例
<br/>
強調文字の例
</p>
<br/>
小節番号#
いくつかの書籍では、大きな章の中に多くの小節があり、小節にはタイトルがなく、数字や他のカウント文字で区別されます。この部分のスタイルは、EPUB 電子書籍におけるこのような小節の番号のレイアウトを規定しています。
/* 小節番号 */
.sectionnum {
font-size: 125%; /* フォントサイズ */
line-height: 125%; /* 行の高さ */
font-weight: bold; /* テキストを太字に */
text-align: center; /* テキストを中央揃え */
font-style: italic; /* テキストを斜体に */
margin: 2.5em 0 0.5em 0; /* 上右下左の外側の余白 */
}
<p class="section">1</p>
<p class="section">2</p>
<p class="section">3</p>
上付き注釈#
いくつかの書籍には多くの注釈があり、注釈内容は通常、章の末尾に置かれ、本文とは別に、いくつかの数字の上付きで本文内容と注釈内容をリンクします。この部分のスタイルは、EPUB 電子書籍におけるこのような数字の上付きのレイアウトを規定しています。
/* 注釈番号 */
.annotatenum {
font-size: 75%; /* フォントサイズ */
line-height: 125%; /* 行の高さ */
vertical-align: super; /* テキストを上付きに垂直揃え */
}
/* 注釈内容 */
.annotate {
font-size: 80%; /* フォントサイズ */
line-height: 120%; /* 行の高さ */
}
<p>注釈番号
<sup class="annotatenum" id="annotatenum001"><small><a href="annotate001">［1］</a></small></sup>
</p>
<p>
<sup class="annotatenum" id="annotate001"><small><a href="annotatenum001">［1］</a></small></sup>
<span class="annotate">注釈本文</span>
</p>
分割線#
注釈や本文とは異なる内容がある場合、通常は分割線を使用してこれらの内容を本文と区別します。この部分のスタイルは、EPUB 電子書籍における分割線のレイアウトを規定しています。
/* 分割線 */
.splitline {
height: 2px; /* 線の太さ */
width: 98%; /* 線の幅 */
border: none; /* 元の線を削除 */
background: #bcbcbc; /* 線の色 */
}
<hr class="splitline"/>
コードブロック#
コンピュータ関連の書籍には多くのコード内容が含まれることが多く、この部分のスタイルは、EPUB 電子書籍におけるコードブロックのレイアウトを規定しています。
/* コードブロックボックス */
.boxblock {
background-color: #dcdcdc; /* コードブロックの背景色 */
margin: 0.25em 0 0.25em 0; /* 上右下左の外側の余白 */
padding: 0.1em 0 0.1em 0; /* 上右下左の内側の余白 */
border: none; /* コードブロックの境界線を削除 */
border-radius: 2px; /* 境界線の角を丸くする */
}
/* コードブロックテキスト */
.boxtext {
font-size: 60%; /* フォントサイズ */
line-height: 120%; /* 行の高さ */
white-space: pre-wrap; /* テキストの通常の空白と改行 */
ertical-align: middle; /* テキストを中央に垂直揃え */
}
<div class="boxblock">
<pre class="boxtext"> コードブロックの例01;
コードブロックの例02;
コードブロックの例03;
</pre>
</div>
上下付き数字#
この部分のスタイルは、EPUB 電子書籍における上下付き数字のレイアウトを規定しています。上下付き数字は、数字の指数や化学元素の表現などに使用されます。
/* 上付き数字 */
<p>10<sup><small>35</small></sup></p>
/* 下付き数字 */
<p>10<sub><small>35</small></sub></p>
画像の例#
挿絵を挿入する必要がある書籍に対して、この部分のスタイルは、EPUB 電子書籍における本文画像のレイアウトを規定しています。
/* 本文画像 */
.image {
width: auto; /* 自動幅 */
height: auto; /* 自動高さ */
max-width: 99%; /* 最大幅 */
display: block; /* ブロック要素を表示 */
line-height: 1.5; /* 行の高さ */
margin-left: auto; /* 自動左外側の余白 */
margin-right: auto; /* 自動右外側の余白 */
/* 画像の水平表示位置は、margin-leftまたはmargin-rightの属性値を変更するだけで済みます
画像を左寄せ：margin-left: 0; margin-right: auto;
画像を右寄せ：margin-left: auto; margin-right: 0;
画像を中央寄せ：margin-left: auto; margin-right: auto;
注意：これらの属性を使用して水平位置を変更する際は、必ずdisplay: block;属性を追加してください
*/
text-align: center; /* 水平中央揃え */
vertical-align: middle; /* 垂直中央揃え */
}
/* 文字画像、特定の難しい文字が正常に表示できない場合、画像の形式で本文に挿入するためにこのスタイルを使用 */
.imagetext {
line-height: 1.2;
height: 1em; /* 画像を1文字の高さに設定 */
width: auto; /* 自動幅 */
max-width: 99%; /* 最大幅 */
text-align: center; /* 水平中央揃え */
vertical-align: middle; /* 垂直中央揃え */
}
<img class="image" src="Images/image01.jpg"/>
<img class="imagetext" src="Images/image01.jpg"/>
画像注釈#
挿絵を挿入する必要がある書籍に対して、この部分のスタイルは、EPUB 電子書籍における本文画像の注釈内容のレイアウトを規定しています。
/* 画像注釈 */
.imagetitle {
margin: 1em 0; /* 上右下左の外側の余白 */
color: #555555; /* テキストの色 */
font-size: 0.75em; /* フォントサイズ */
text-align: center; /* テキストを中央揃え */
}
<p class="imagetitle">画像注釈</p>
カバーの例#
電子書籍には通常独自のカバーがあり、この部分のスタイルは、EPUB 電子書籍におけるカバー画像のレイアウトを規定しています。
<style type="text/CSS">
/* 印刷カバーのスタイル */
@page {
padding: 0;
margin: 0;
}
/* プレビューカバーのスタイル */
body {
text-align: center;
padding: 0;
margin: 0;
}
</style>
<div>
<img width="100%" src="Images/cover.jpg"/>
</div>
opf ファイルのメタデータ <metadata>#
opf ファイルは EPUB 電子書籍に欠かせない部分であり、その中のメタデータ <metadata> 属性は重要な内容を含んでおり、通常以下のいくつかの部分を含みます。
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
<dc:title>タイトル</dc:title>
<dc:creator>著者</dc:creator>
<dc:format>フォーマット</dc:format>
<dc:description>概要<dc:description>
<dc:date>時間2023-02-10T05:20:00.00+00:00</dc:date>
<dc:identifier id="ebookid">文書ID</dc:identifier>
<dc:language>ja</dc:language>
<dc:publisher>出版社</dc:publisher>
<dc:contributor>貢献者または他の副次的責任者</dc:contributor>
<dc:type>タイプ</dc:type>
<dc:subject>キーワード</dc:subject>
<dc:source>出所情報<dc:source/>
<dc:relation>関連資料<dc:relation/>
<dc:coverage>カバレッジ<dc:coverage/>
<dc:rights>権利の説明</dc:rights>
</metadata>
説明：
- メタデータ <metadata> には、title、Identifier、Language の三つの要素が必ず含まれている必要があります。
- 必要に応じて、title、creator、contributor、identifier、type、date、subject は複数行のデータを設定できます。
- date 要素は、ISO5601 で定義された日付形式を採用し、オプションの event 属性を使用して以下の三種類の異なるタイプを定義します。
<dc:date opf:event="creation">創作時間</dc:date>
<dc:date opf:event="publication">発行時間</dc:date>
<dc:date opf:event="modification">修正時間</dc:date>
- identifier 要素には、少なくとも一つの指定された id 属性が必要であり、package 要素の unique-identifier 属性から id を参照し、さらにオプションの event 属性で異なるタイプの書号を定義する必要があります。
<dc:identifier id="ebookid">文書ID</dc:identifier>
<dc:identifier opf:scheme="ISBN">ISBN書号</dc:identifier>