[Code] epubとcss
本好きに送る「電子書籍のつくり方」講座
誰でも簡単手作り電子書籍
2014-03-02
電子書籍づくり実践（EPUBの構造 xhtmlとcss）
このブログでは、前々回のエントリまで数回に渡り
文章にタグ付けをし
用意したEPUBテンプレートにコピペし
その内容をブラウザで表示確認をする
という作業をして来ました。今回はそこで使った「テンプレート」を通して、EPUBの構造を学んでおきましょう。「構造」などというと難しく聞こえますが、押さえておくのは下記の点だけです。
■.epubとは
必要なファイル類を定められたフォルダ構成に従って配置し、圧縮したもの。
以上です。
テンプレートとして、既にこの構造になっているデータ*1があるわけですから、特にこの構造を覚えるたりとか、イチから自分で作ったりする必要もありません。現時点で押さえておきたいのは
☆テンプレートのどこに手を入れる必要があるか？
☆その部分はどんな働きをしているのか？
という点だけです。それではEPUBを構成する「中身」を見ていきましょう。ここからは書かれる文字を追うだけでなく、前々回使ったテンプレートを開いて、内容を対比させながら読み進めると理解しやすいと思います。
■xhtmlファイルは「本の中身」（xhtmlフォルダ）
電子書籍づくりで一番たくさんの手を入れるのが、xhtmlフォルダの「ページファイル（拡張子.xhtml）」です。このファイルに、電子書籍で表示させたい内容を書き込みます。書き込むルールはhtmlが進化したxhtmlという記述言語です。*2
■cssで「見た目」をコントロールする（styleフォルダ）
xhtmlフォルダと同じ階層に「style」という名前のフォルダあります。このフォルダには、拡張子が「.css」となっているファイルが複数入っています。「css」とは、フォルダ名の通り、「スタイル」をコントロールするためのファイルです。といっても「？」だと思うので、それでは実際に「コントロール」してみましょう。
スタイルをコントロール「する側」の記述
前々回に使用した「book-template - コピー」フォルダを用意してください。その中にある「styleフォルダ」を開き、その中の「book-style.css」をエディタで開きます。開いたら「tobira-midashi」で検索を掛けます。そうすると該当箇所として下記が表示されます。
ここに下記の内容を追記します。
.vrtl .tobira-midashi {
と
}
の間に
font-size:3em;
.vrtl .oo-midashi {
と
}
の間に
font-size:2em;
このようになります。
問題なければ上書き保存してください。それでは、いま記述した内容が何なのか説明します。
font-size
とは読んで字の通り「文字（フォント）のサイズ」を指定しています。
em
とは文字サイズの単位で、基本サイズを「1em」とし、数値が大きくなるほど文字サイズも大きくなります。上のように記述することによりスタイル名*3tobira-midashi指示内容文字サイズを3emにスタイル名oo-midashi指示内容文字サイズを2emにというスタイルが、CSSのファイルに登録されたことになります。次にこのスタイルの指示を「受ける側」の設定をします。今回は「tobira-midashi」のスタイルを反映させるのはh1の文章「oo-midashi」のスタイルを反映させるのはh2の文章とします。
スタイルをコントロール「される側」の記述
xhtmlフォルダ内の「p-002.xhtml」をエディタで開き、下記の検索置換を2回に分けて掛けます。
検索<h1>置換<h1 class="tobira-midashi">
検索<h2>置換<h2 class="oo-midashi">
下のようになればOKです。 問題なければ上書き保存してください。
cssに記述したスタイルを反映させるには、上のように反映したい箇所の開始タグに「class="スタイル名"」と記述をします。
それでは文字サイズの指定がされた「p-002.xhtmlの見出し（h1、h2）」がどのように見えるか確認してみましょう。
p-002.xhtmをブラウザで開きます。
見出しの文字サイズが大きくなっていることが確認できます。またh1、h2でそのサイズが異なっている（h1のほうがh2より大きい）のも確認できます。これが「CSSに登録されたスタイルが、xhtml側のしかるべき場所（今回の場合h1とh2）に反映させた状態」です。
■CSSについての知識
今回、話しの中心となった「CSS」ですが、説明としてはこれから電子書籍をつくり進めるうえで、必要最低限の内容になっています。こちらもHTML同様、知識の積み増しをした方がより楽しく電子書籍を制作することができますし、またweb制作にも深く関係している技術なので、そちらの知識習得も兼ねて学び進めるのも良いと思います。
初心者向けの解説サイトとしては
やさしいホームページ入門：CSS入門
http://www.ink.or.jp/~bigblock/css/index.html
が解りやすくておすすめです。また「CSS 入門」などのキーワードでGoogle検索して、自分に合った学習サイトを探してみるのも良いかもしれません。そうしてCSSへの理解を深められたら、現在使っているEPUBテンプレートと一緒にダウンロードしたデータの中にある「CSS機能一覧.pdf」に目を通してみてください。これはテンプレート内で「既に設定されているスタイルの一覧」で、今後電子書籍づくりを進める際にとても役に立ちます。
■今日のまとめ
EPUBの構造。今回は
xhtmlフォルダの「.xhtml」
styleフォルダの「.css」
の役割について説明しました。その関係性は
.css：スタイルを登録するファイル
.xhtml：cssに登録されたスタイルが反映されるファイル
となります。
*1:日本電子書籍出版社協会電書協EPUB 3 制作ガイド。下記よりダウンロードできます。http://www.ebpaj.jp/guide.html
その中にある「book-template.epub」というファイルの拡張子を.zipに変更し、解凍すると上図の構造を持ったフォルダが作られます
*2:ここでhtmlとxhtmlの違いは意識しなくてもOKです。同じようなものと理解しておいてください。
*3:この部分を正式には「class名」といいます
k_airyuu 2014-03-02 14:15
本好きに送る「電子書籍のつくり方」講座
http://k-airyuu.hatenablog.com/entry/2014/03/02/141514
CSS For Epub
Back To Top横書き化基本縦書き化基本圏点11種類縦書き標準横書き標準クリップEbookSoftPackage
電子書籍を作るときには、CSSファイルが必要になります。これは、Sigilでは「スタイルシート」として扱われているものです。たてがきにするためには、CSSファイルのほかに、Epubファイルの先頭部分などを書き直す必要があります。それをおこなったうえで、以下に公開するCSSファイルをご利用ください。
■横書き化基本
▽〈html〉タグを次のよう書き直す。
〈html
xml:lang="ja"
xmlns:epub="http://www.idpf.org/2007/ops"
xmlns:xml="http://www.w3.org/XML/1998/namespace"〉
これは4行にもおよび厄介ですが、次の一行でも十分機能します。
〈html xmlns="http://www.w3.org/1999/xhtml"〉
これをコピペしてお使いください。
▽ヘッダ（<head>タグと</head>タグのあいだ）にスタイルシートを読み込むためのつぎのような一文を加える。
〈link class="horizontal" href="../Styles/Style0001.css" rel="stylesheet" title="horizontal" type="text/css" /〉
ここで注意しておきますと、本格的な電子書籍を作るためには、"Style0001.css"ファイルの内容を以下に紹介するCSSファイルの内容によって書き直す必要があります。"Style0001.css"ファイルは、Sigilでは左端ブックブラウザーにある「Styles」を右クリックして、「空のスタイルシートを追加」をクリックすると自動的に生成されます。
以上をすべて書き込んだ「SectionTemplate.xhtml」というファイルを作っておきましたので、このファイルを読み込むことによって、新しいセクションファイルの作成は楽になります。
■セクションファイル（横書き）のダウンロード
▽ページ送り
縦書きの書物として右から左にページ送りするように設定するには、左端のブックブラウザーの下から二番目にある「content.opf」の内容を書き換えます。そのやり方。
〈spine toc="ncx"〉
をだまってつぎのように書き直す。
〈spine page-progression-direction="ltr" toc="ncx">
以上の処理をおこなったうえで必ず、「Styles」にまず「空のスタイルシートを追加」し、そこに以下の「縦書き用の基本的CSS」をコピー・ペーストしてください。とりわけ、その先頭部分である
html {
epub-writing-mode:horizontal-tb;
-webkit-writing-mode:horizontal-tb;
}
は必ず書き込んでおかねばなりません。これで縦書き用の電子書籍を作ることができます。
■縦書き化基本
▽〈html〉タグを次のよう書き直す。
〈html
xml:lang="ja"
xmlns:epub="http://www.idpf.org/2007/ops"
xmlns:xml="http://www.w3.org/XML/1998/namespace"〉
これは4行にもおよび厄介ですが、次の一行でも十分機能します。
<
〈html xmlns="http://www.w3.org/1999/xhtml"〉
これをコピペしてお使いください。
２．ヘッダ（〈head〉タグと〈/head〉タグのあいだ）にスタイルシートを読み込むためのつぎのような一文を加える。
〈link class="vertical" href="../Styles/Style0001.css "
rel="stylesheet" title="vertical" type="text/css" /〉
ここで注意しておきますと、本格的な電子書籍を作るためには、”Style0001.css”ファイルの内容をいかに紹介するCSSファイルの内容によって書き直す必要があります。”Style0001.css”ファイルは、Sigilでは左端ブックブラウザーにある「Styles」を右クリックして、「空のスタイルシートを追加」をクリックすると自動的に生成されます。
■ページ送り
縦書きの書物として右から左にページ送りするように設定するには、左端のブックブラウザーの下から二番目にある「content.opf」の内容を書き換えます。そのやり方。
〈spine toc="ncx"〉
をだまってつぎのように書き直す。
〈spine page-progression-direction="rtl" toc="ncx"〉
以上の処理をおこなったうえで必ず、「Styles」にまず「空のスタイルシートを追加」し、そこに以下の「縦書き用の基本的CSS」をコピー・ペーストしてください。とりわけ、その先頭部分である
html {
width: 100%;
writing-mode: vertical-rl;
-epub-writing-mode: vertical-rl;｝
は必ず書き込んでおかねばなりません。これで縦書き用の電子書籍を作ることができます。
■セクションファイル（縦書き）のダウンロード
圏点
横書き標準ＣＳＳ 下記のクリップのなかに最新版が収納されて居rます。2018/3/1改訂
縦書き標準ＣＳＳ 下記のクリップのなかに最新版が収納されて居rます。2018/3/1改訂
クリップ 2018/3/5 改訂。ここをクリックするとzipホルダーがダウンロードされます。そのなかにｃｓｓとclipファイルが入っています。
キンドル本作制のためのソフト・パッケージ。2018/3/1改訂。電子書籍を作るために必要な無料の基本ソフトを収めました。各ソフトについては、拙著『電子書籍の効率的な作り方』をご参照ください。Windows用とMac用があります。
Windows用 (2018年03月05日改訂) 追加ソフト（20180324, 14.4MB）
Mac用 (2018年03月05日改訂)追加ソフト（20180324, 15.8MB）
.PKGファイル (2018年05月17日改訂)
CSS For Epub
http://kogawara.sakura.ne.jp/Ebook/CssForEpub/cssforepub.html
今更だけどEPUB（イーパブ）ファイルどうやって読むの？
2017年4月22日
@WebfieldTW
■EPUB（イーパブ）っていったいなに？
EPUBとは、「電子出版」を意味する「Electronic Publication」からとった名称で、 International Digital Publishing Forum (IDPF) (http://www.idpf.org/) が主体となり、仕様の策定や普及を行っている電子書籍を読むためのファイルフォーマットです。
■EPUBファイル構造
HTML（ホームページ制作の言語）を土台としており、今後デバイスがなくなった等の理由で読めなくなることはまずありません。
EPUBファイルの構造を簡単に言えば、HTMLファイルをzipでまとめ、拡張子を.epubとしたものです。ですので、「.epub」ファイルの拡張子を.zipに変更すれば、zipファイルとなり、解凍すればHTMLファイルとして構成を確認することができます。HTMLファイルとして読めるのですが、ちょっと不便です。そこで便利に読むために登場するのが・・・。
■EPUBを読むには
電子書籍の共通フォーマットであるEPUB形式のファイルを閲覧するには、いろいろなリーダーが出ていますが、代表的なものは「Adobe Digital Editions」や「iBook」などがあります。Macユーザなら迷わずiBooksでしょう。デフォルトでインストールされているアプリですので、PCでもiPadでもiPhoneでも安心して読むことが出来ます！万が一インストールされていない場合でもAppStoreやiTunesから無料で簡単にインストールすることが出来ます。
WindowsユーザはAdobe Digital Editionsがオススメです。Adobeによって開発されたEPUBリーダーですがPDFドキュメントも読むことが出来ます。
以下からダウンロード出来ます。
http://www.adobe.com/solutions/ebook/digital-editions/download.html
その他、オンライン上で使用できるEPUBリーダーもあります。Google Chromeブラウザの場合、Readiumという拡張機能が有名です。
https://chrome.google.com/webstore/detail/readium/fepbnnnkkadjhjahcafoaglimekefifl?hl=ja
Firefoxブラウザの場合、ePUBReaderという拡張機能も！拡張子が.epubのファイルを受け取ったけれど、どうして開いたらいいか分からないという時には、とりあえず、ブラウザのこういったアドオンは手軽でいいかも知れません。
https://addons.mozilla.org/ja/firefox/addon/epubreader/
Metell
https://www.appleach.co.jp/2017/04/210/
電子書籍フォーマットの本命、「EPUB」をいまのうちに理解しておく
2011年3月10日
Publickeyでは、現在策定中の電子書籍フォーマット「EPUB 3」の動向について積極的に伝えていますが、ここでちょっと立ち止まって、EPUB 3とは何か？ という基本的な情報について簡単にまとめておこうと思います。
■EPUBの仕様はオープンかつフリー
EPUBとは、「電子出版」を意味する「Electronic Publication」からとった名称といわれていて、International Digital Publishing Forum（IDPF、国際電子出版フォーラム）が策定をすすめている電子書籍のファイルフォーマットです。ちなみにEPUBは「イーパブ」と読みます（EPUB 3はイーパブスリー）。また、表記は「ePub」と表記されることもありますが、最近は「EPUB」とすべて大文字で表記されることが多いようです（仕様書などでは「EPUB」と表記されています）。
イースト株式会社の高瀬拓史氏による資料「EPUBの現状とEPUB3.0への期待」から内容を少しお借りしつつ、EPUBがどういうものかを紹介していきましょう。
EPUBの標準仕様としての特徴はオープンかつフリーであることです。そしてその具体的な実体は、XML、XHTML/HTML/CSSファイルなどをまとめてZIPで圧縮し、.epubという拡張子を付けたもの。
EPUBの仕様は基本的にWeb標準であるHTMLやCSSをベースにしています。そして現在策定中のEPUB 3はHTML5やCSS3をベースにしているため、基本的にHTML5やCSSが備えている機能はEPUBでそのまま利用可能です。文中にCanvasで描いたグラフィックを入れたり、Videoタグで動画を入れたり、CSS3のアニメーションを利用することも可能です。EPUBリーダーによってはJavaScriptも動作するでしょう（JavaScriptの動作は仕様上必須とはなっていません）。
EPUBで電子書籍を作成するということは、Webサイトを作成するのと同じようにHタグで見出しを書き、Pタグで本文を書き、CSSでレイアウトをして、それをZIPで圧縮する、ということになります。ここから分かるように、EPUBはWebと非常に親和性が高く、これまでのWebのノウハウを使って電子書籍を作成することが可能です。このWebとの親和性が、EPUBを電子書籍フォーマットの本命と位置づけさせる最大の要素です。
EPUB 3 | International Digital Publishing Forum
ただしWebとEPUBの違いは、EPUBは電子書籍リーダーにダウンロードしてオフラインで参照することを前提にしているため、画像や動画などすべてのファイルがまとめて圧縮されていること。そして、表紙や目次や索引、章立て、ページ番号といった、（Webには存在しない）書籍に特有の内容や機能を記述するためのマークアップ方法やファイル構成が決められている、ということです。
EPUB 3の仕様はIDPFのサイト内の「EPUB 3 | International Digital Publishing Forum」のページから参照できます。
参考記事
EPUB3を、世界各国の代表から構成されるISO／IEC（国際標準化機構／国際電気標準会議）による公的標準（デジュールスタンダード）にする動きが始まっています。
EPUB 3、今夏以降にISO国際標準となる見通し
EPUB 3対応電子書籍リーダーのリファレンス実装（＝見本となる実装）をオープンソースで開発するプロジェクト「Readium」が公開されました。
EPUB 3リーダーのリファレンス実装「Readium」、オープンソースで開始
JEPA（日本電子出版協会）とイーストは、EPUB 3に対応した電子書籍の作成方法を解説した「EPUB日本語文書作成チュートリアル」と、EPUB 3に対応した電子書籍リーダーを実装するためのガイドラインのための「EPUB日本語文書対応Reading System実装ガイドライン」の公開を開始しました。
EPUB 3に対応した電子書籍の作成チュートリアル公開
■EPUBは「リフロー」が大きな特徴
EPUBのレイアウト上の最大の特徴が「リフロー」（再流し込み）です。リフローのもっとも身近な例がWebページです。Webページは、Webブラウザのウィンドウの大きさに合わせて一行の長さや縦方向に表示される行数が変化します。EPUBのレイアウトも同様に、iPadを縦にして表示したときと横にして表示したときで1行の文字数が変化するのに合わせてレイアウトが変化します。もっと小さいiPhoneの画面で見れば、今度は画像が1つと数行くらいしか表示されないかもしれません。EUPBはWebページと同じように、画面の大きさに合わせてレイアウトが変化するのです。EPUBではどのデバイスでみるかは利用者の環境に依存しますから、雑誌でいう見開きで完結したレイアウト、といったことをすべてのデバイスで表現することは事実上できません。
小説や文学作品のような文字中心の書籍では、画面の行数や文字数が変化してもそれほど問題にはならないと予想されますが、ページごとに写真と見出しと文字のバランスを考えてレイアウトされる雑誌や実用書などでは、リフローが前提となっているEPUBでどのようにレイアウトするかは課題となっています。リフローしても美しく見えるようなレイアウトと、画面の幅によってスタイルシートを切り替える機能を使いこなすテクニックなどが今後開発されていくことでしょう。あるいは出版物ごとに推奨デバイスが示されるなどの動きもでてくると予想されます。
■EPUB 3からは縦書き、ルビなどに対応
日本でEPUB 3が注目される背景には、EPUB 3ではいままでのEPUBではできなかった縦書き、ルビ、圏点（傍点）といった、日本語の書籍を作成するうえでニーズの高かった表現が可能になり、文芸書などの電子書籍を実現できるようになったことが1つ。もう1つはiPadやKindle、ソニーのReader、シャープのGalapagosといった電子書籍リーダー搭載のデバイスが昨年から一斉に登場しはじめたこと、この2つのタイミングが重なった点にあると思います。EPUB 3の仕様は5月に完成する見通しとなっており、おそらく夏頃にはiPadをはじめとしてEPUB 3に対応する電子書籍リーダー、つまり日本語の縦書きやルビなどを表示可能な電子書籍リーダーが次々に登場してくることでしょう。と同時に、そうした電子書籍リーダーに電子書籍を配信するための電子書籍マーケットもさらに活気を増すはずです。電子書籍の動向に詳しいイースト代表取締役の下川和男氏は、この頃には国内向けのアップルのiBook Storeがオープンするだろうと予想しています。夏頃にはこうした目に見える動きが予想されることから、いまの段階でこれらを先取りしたいと考える企業や個人がEPUBに注目し、いまから情報収集や実験的な製品の発表をはじめているのです。ただし前述のリフローのように、どのデバイスで見ても美しいレイアウトを実現するようなEPUBを作成するのは現時点でかなり難しいといわざるを得ません（iPad限定など画面サイズと電子書籍リーダーを決め打ちしてしまえば、きれいなレイアウトが可能です）。レイアウトをきれいに見せたいならばPDFやアプリ化してしまう方が優れており、EPUB 3が商業的な電子出版で本格的に使われだすには、まだしばらくは電子書籍リーダーやデバイス、そして書籍製作の3つすべての進化と試行錯誤のための時間が必要ではないかと考えています。
（情報開示：EPUBの動向をこうして昨年から記事にしていたところ、JEPA（日本電子出版協会）によるEPUB関連の活動を手伝ってほしいと依頼があり、少し手伝っているところです。3月22日のJEPAの成果報告会にもちょっとだけ登場します）
参考記事
慶應義塾大学SFC研究所、KADOKAWA、講談社、集英社、小学館、出版デジタル機構は、共同で慶應義塾大学湘南藤沢キャンパス（SFC）に、未来の出版に関する研究を行う 「Advanced Publishing Laboratory」（APL）を設置することで合意したと発表しました。
Publickey
https://www.publickey1.jp/blog/11/epub.html
