元ラノベ作家が電子書籍を自力で作成して販売してみた話

3-2.CSS（ちょっと しんどい すたいる）

　前回に引き続き、電子書籍で使えるCSSのちょっとしたテクニックについて、僕が自作で使用した事例をもとにしつつ紹介していきたいと思います。

　ただし前回お話したのは、あくまで基本的な処理の仕方についてです。マリオで例えれば移動とジャンプの仕方ぐらいしかご紹介していません。

　たしかにこの二つだけ出来ればステージのクリアは可能なのですが、それだけでは立ちゆかない難関が後々待ち構えているといったニュアンスです。

　僕自身もまだまだ勉強中の身ですが、より品質の高い書籍を作り込んでいくために皆さんと共に研鑽できればと思っているのが実情です。

2．章分け記号について

　WEB小説であれば、章と章の分かれ目や、シーンとシーンのつなぎ目は、別のページに分けて分割するだけで事足りるかと思います。ですがページが連続している小説の場合、「ここでシーンが入れ替わった」というシーンの転換を、明示的に読者へ示す必要があります。

　でんでんマークダウンだと、改ページの仕方については処理の方法が書かれていますが（イコール記号を四つ以上繋げると改ページの指示になる）、シーンが変わる度改ページを行うというのは、いかにも格好悪いです。

　僕の場合はシーン分けを示すために〝§〟←このようなセクション記号を利用していますが、ただこれを置いただけだとやはり見栄えが悪いです。また、スペースを繋げて位置を調節するのは、あまり見栄え的によろしくありません。

　そこで以下のようなセクション記号専用のクラスを追記することで、対処しました。

p.SectionSymbol{

margin-top:5em;

line-height: 3.6em;

font-size: 1.5em;

}

　頭の【p.】の部分については、本来必要無いものなので、今回は解説しません。実際には書かなくても機能しますが、あると後々便利という程度のものです。ここで定義している【SectionSymbol】というクラス名のみに注目してください。

　このクラスに対する属性付けは上から順に「マージン（余白）を5文字分空ける」「ラインの高さを3.6文字分空ける」「文字の大きさを1.5文字分の大きさにする」といった具合です。

　CSSにこのスタイルを追記した状態で、本文のテキストファイルでシーン分けしたい箇所に以下のような記述を入れておきます。

<p class="section">§</p>

　こうすると、わりと綺麗な感じでセクション分け記号を本文中に配置することができます。具体的な効果については、カクヨム内に画像を貼り付けることができないので、ぜひ僕の書籍を購入して確かめてください（熱い宣伝）

　ここで一点気を付けてほしいのは、【line-hight:】のプロパティについてです。

　「hight」というのは高さという意味ですが、縦書き原稿だと横幅が広くなります。これも、前回お話しした通り、縦と横で文章の方向が入れ替わっていることによる落とし穴です。

　また、【em】というのは「文字の大きさに対して何倍」という大きさの指示を与えるもので、電子書籍で文字の大きさを指定する場合はこの単位系を遵守してください。

　ピクセル数やポイント数で指定する方法も、数多く紹介されてはいますが、これはWEBサイトにおけるスタンダードなやり方です。

　読者が自分の好みに応じて、文字のポイント数を可変できてしまう電子書籍媒体だと、ピクセル数指定では変化が起きず見栄えが崩れてしまいます。なので読者が文字の大きさを変えたとき、それを基準にして記号も勝手に大きくなってくれる、【em】での単位系を使うことが最善だと自分は考えています。

　また実際の書籍だと、小さい画像を文中に埋め込んで章分け記号として使っているのを見かけることがありますが、これも独自にスタイルを改良すれば同じように自作することが可能です。

　ただし、こちらについては画像の埋め込み処理という、また違ったアプローチから処理を行う必要があり、自分も確実性について確証が持てなかったので、これについては実装を見送ってます。

（試作としては成功したんですが、検証がじゅうぶん出来ないと思われたので、面倒を避けるために手を出さないでおいた）

　こちらの方が簡単確実なので、初めて出される方はこのぐらいのやり方をオススメしたいと思います。使用する記号は☆でも◆でも、好きなように変えていただけますし、大きさも数字をいじるだけなので簡単です。

　ただし、複数の記号を連続して繋げるなど、応用を重ねていくとまた別の問題も出てくるので、そこについては独自に研究をしてみてください。

３．章題のスタイルを変えたい

　〝第一章　○○〟といった、本の中に何度か登場する本文外の文字に対して、特定のパターンをつけることで目立たせたい、という要望もあると思います。

　どちらかというと、こうした部分に対するスタイル変更を望む方も多いのではないでしょうか。

　まず前提知識として、「でんでんマークダウン」では、章題に〝## 第一章　○○〟と、シャープ記号二つを文頭につけるようにと使い方に書かれています。

　この処理をしておくと、コンバーター側はこの記号を検出して、自動的に章題として認識し、目次にこの章題をリストアップした状態で生成をしてくれます。

　逆にこの記号付け（マークダウン）を怠ると、目次が正しく生成されなくて読者に不便を強いることになるので気を付けて本文制作する必要があります。

　この状態でコンバートされたEPUBをZIPとして解凍し、所定の箇所のXHTMLをテキストエディタで開いてみると、以下のような形でマークアップが施されています。

<h2 id="toc_index_1">第一章　○○</h2>

　この【id="toc_index_1"】というのは、コンバーター側が自動的に配置しているものなので、あまり気にしなくて良いと思います。重要なのは【<h2>】という部分で、これはHTMLの基本とも言える〝見出し要素〟を現すタグです。

　これは文書の構造を分かりやすくするための決まり事みたいなもので、普段意識してはいませんがどのWEBページにも必ず登場するといって良いものです。

　見出しとしての順位が高いモノから純に、h1→h2……と値を大きくしていくのが決まり事です。電子書籍においては、作品のタイトルが【h1要素】で章題が【h2要素】にあたります。

　ここまでは、「CSSに新しいクラスを作ってスタイルを配置する」というやり方を紹介してきましたが、今回は「最初から存在する既存クラスにスタイルを配置する」という、ちょっと違ったやり方になります。

　とはいえ、書き方はこれまでとさほど変わりません。たとえば章題の大きさを変更したいなら以下のようにCSSへ記述します。

h2{

font-size: 2em;

}

　これで、「h2要素はフォントサイズを本文の2倍にする」というルールが新しく追加されました。

　たったこれだけ――ではあるのですが、実はこの単純さにこそ落とし穴があります。

　大抵の場合、こうしたメジャーな要素についてはデフォルトの指定が存在しているので、同じ要素に対してプロパティが重複している場合があります。

　例えばもし、デフォルトのCSSに「文字を1.5倍に」という指示が書かれていたとすれば、今付け加えた「2倍に」という指示と重複してしまいます。

　この場合、h2要素はどんな表示になるかと言えば、1.5×2＝3倍に……はなりません。

　重複するプロパティに対して、ブラウザの処理は「後に書いたものほど優先される」というルールが決まっています。なので、CSS内で下の方にあるプロパティが、この場合は優先されます。

　しかし、これで解決というわけにもいかず、例えば「もし文中に自分が知らないh2要素があったら」と考えてみてください。指定したつもりのない部分が、勝手に2倍になってしまっている、という可能性も考えられます。

　たった1行書き加えただけで、知らないうちに本文が丸ごと崩れてしまうなんてことも起こり得ます。

　既存プロパティに修正を加える場合は、思わぬ箇所へスタイルの波及を起こしている可能性を考慮して、じゅうぶんに確認を行ってからリリースをしてください。

　また、既存プロパティに対して一度に変更するよりも、欲しいスタイルに応じてクラス名をいちいち定義する方が、かえって安全性は高いかもしれません。

　自分で新しいルールを作るより、既存のルールを修正する方が、実は何倍も難易度が高いことをしているという点については充分気を付けてください。

次回は挿絵画像の埋め込み関係について書いていきます。