電子書籍の作り方

誰もがKindle本で出版できる時代になった

HTMLとCSSの役割/CSSで何が変わるか

スタイルシート(CSS)を必要としないで、電子書籍を制作する方法を「Sigilで電子書籍を作る方法(スタイルシート不要編)」と「 Sigilを使えば電子書籍は簡単に作れる」で解説しました(気づけば同じような記事を書いていました…)。電子書籍リーダー/Kindle読書アプリに元から搭載されているスタイルシートによる標準デザインで問題なければ、電子書籍制作にHTMLやCSSの知識は必要ありません。

しかしながら、電子書籍のページデザインを標準のものから変更したいときは、HTMLとCSSの知識が不可欠です。

HTMLとCSS

HTMLはウェブページや書籍ページなどの構造とその構成要素の役割を示し、スタイルシート(CSS)はHTMLで示された要素をどのようにデザインするかを規定します。

HTMLは役割を示す

ページを構成する「ある意味のまとまり」をHTMLタグで前後を囲み、その役割を示します。

f:id:potex:20160412142500p:plain

CSSはデザインを示す

HTMLタグで括られた部分に対して任意のデザインを決める。何も指定しないときは、それを表示するウェブブラウザや電子書籍端末であらかじめ決められた標準のデザインになる。

f:id:potex:20160412142228p:plain

CSSを追加すればページのデザインは自由に変えることができる。 ←これが重要!

CSSで電子書籍のデザインがどのように変わるか?

CSSを指定しない(標準デザイン)
f:id:potex:20160412021855p:plain

CSSを追加。大・中見出しの字の大きさをやや小さくして、中見出しの下に線を引いた。
f:id:potex:20160412151842p:plain

CSSなしの標準デザインに「縦書きのCSS」だけを追加。
f:id:potex:20160412151916p:plain

上記のCSSから、大・中見出しの字の大きさをやや小さく、著者名を下に移動、段落と段落の間隔をなくし、すらすら読めるようにした。
f:id:potex:20160412151929p:plain

標準デザインから比べると、CSSを追加することによって見やすく、読みやすくなるのが分かると思います。

過度のデザインは読みやすさを損ないますが、必要な調整は確かにあると考えています。そして、それはCSSによってのみ行うことができます。読みやすさを大切にするならCSSの知識と設定は必須です。

今後の記事では実際に行っているCSS設定を解説しますが、このブログではこれ以上は、HTMLとCSSについての説明は行いません。初心者の方には、HTMLの入門書などで学ぶことをお薦めします。HTMLとCSSの関連書は数多く出版されていますが、なるべく簡単なものから読み始めるのが良いでしょう。

初心者の方にこの本を推薦します。
スラスラわかるHTML&CSSのきほん