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

3-4.CSS（ちゅうに しゅみな すたいる）

　まさかCSSの話だけで4回も引っ張ることになるとは思わなくて、書いてる僕自身びっくりしています。

　今回はこれまでの「書籍を出すのに必須な要素をどうするか」という話ではなく、「電子書籍だからこそできる要素をどう増やすか」という、グレードアップ的な要素についてです。

５．ステータス表を作ろう

　「なろう」などで異世界モノを書いたor読んだことのある方なら、一度は目にしたことがあることでしょう〝ステータス表〟。

　まるでゲームのリプレイノベルっぽく、キャラクターの能力や成長度合いを一目で分かるようにできて、お遊び的な要素と思われがちですが意外と人気な演出です。

　僕もこれを自分の作品に、しかも電子書籍ならではの方法で取り入れてみることにしました。

　実は高校のパソコンを使った授業で「ホームページを作ろう」的な話を習ったことがあるのですが、そのときに〝テーブル〟というものを教えてもらったことがありました。これは、ウェブページ上で簡単に〝表（ひょう）〟を作成できるというものです。

　実のところCSS技術が未発達な頃は、ページの各要素を整列して並べるために、このテーブル要素を用いた〝テーブルレイアウト〟と呼ばれるもので、そうと意識していないだけで意外と色んな場面で目にしているかもしれません。

　そんなHTMLではお馴染みのテーブル要素ですが、電子書籍を学び始めた当初の僕は、「もしかして電子書籍も元はHTMLなら、同じようにテーブルが使えるのではないか？」と思いつき実践してみることにしました。

　これが驚いたことに、きちんと〝表〟がページ内で表示することができてしまいました。

　これを利用して、キャラクターの隣にそれぞれ能力の値を示した〝ステータス表〟を、ちょっとゲームっぽい感じに示すことができました。

　僕の場合、ファンタジーではなくロボットモノなので、スパロボっぽいものを目指してみたんですが（笑）

　もちろん、表の画像を作って直接貼り付けるという方法でも出来ることには出来ますが、これだと文字が自由に大小できなかったり、背景色の変更が反映されなかったり、せっかくの電子書籍という媒体の強みを活かし切れていなくて勿体なく感じます。

　自分の理想通りの見た目を再現するのはかなりたいへんですが、一番引っ掛かりそうな部分についてのコツだけはお伝えするので、時間さえ掛ければ確実に再現できると思います。

　本来なら画像や実際のテーブルを使って紹介したいところですが、カクヨムではその機能が存在しないので、テキストだけで頑張って解説してみます。

―――――――――――――――――

｜　名前　｜　性別　｜　クラス　｜

―――――――――――――――――

｜　太郎　｜　男　　｜　　１組　｜

―――――――――――――――――

　ものすごくありがちな例ですが、例えばこんな表を作りたい場合、HTMLでは縦と横の要素を順番に記述していきます。

<table>

<tr>

<td>名前</td><td>性別</td><td>クラス</td>

</tr>

<tr>

<td>太郎</td><td>男</td><td>１組</td>

</tr>

</table>

　【table】自体が表の始まりと終わりを、【tr】と【td】がそれぞれ、縦と横の要素の始まりと終わりを表しています。

　他にも色々な機能がTABLEにはありますが、今回紹介するステータス表を作るためにはこれだけ抑えておけば大丈夫です。

　これだけで〝表そのもの〟を作ることは可能なのですが、実はこれでは全く見た目が表として機能していません。試しに上のHTMLをテキストエディタにコピーして、でんでんコンバーターで変換してみると分かると思います。

　実は縦書きの電子書籍にこの表を入れ込むと、表とその中身のテキストも縦書きになって表示されてしまう上、しかも枠線のスタイルが指定されていないので、ただ文字が整列されて並んでいるだけのデータが出来てしまいます。

　テキストで表現してみると、マジでこんな感じになってしまいます↓

太　名

郎　前

男　性

　　別

１　ク

組　ラ

　　ス

　この表のなり損ないを表にするために、解決しなければならない課題は主に三つ。

①枠線を引く

②表の中身の位置を調節する

③表全体を横書き化する

　①と②に関しては、色んなHTMLの解説サイトで死ぬほど紹介されている既出の話題なので、今回は敢えて詳細について解説しません。

　ここでもっとも大きな問題となり、尚且つ紹介しているサイトが一切存在しない前人未踏の課題である③について、簡単な解決法が見つかったのでそれを皆さんに今回はご紹介したいと思います。

　まず考え方としては、〝縦書きのページの中に、横書きが許される特別な領域を作る〟という考え方をしていきます。

　HTMLはインライン要素とブロック要素の二つからできていて、文字はインライン要素、画像や文字の入る領域がブロック要素という形です。四角い透明の板がブロックとして並んでいて、その透明の板の上に文字が書かれているといった感じで理解してください。

　つまり、ここでいう〝特別な領域〟というのは、〝特定のブロックだけを横書きにする〟という意味になります。

　ブロックを新しく定義するのは簡単で、以下のように【div】要素というものを使います。

<div>

<p>中身</p>

</div>

　このブロックの大きさは、あらかじめ定義して大きさを決めることもできますが、指定が無い限りは中身の要素に合わせて広がってくれます。また、この【div】には、今までやってきたのと同じようにクラスを指定することでスタイルを設定することが可能です。

　そこで、〝領域内の要素が横書きになるようなdiv要素のクラス〟を作るために、CSSで以下のような指定を書き加えます。

div.Status_Table{

-epub-writing-mode:horizontal-tb;

}

　この【-epub-writing-mode:horizontal-tb;】というのは、文字を横書きで表示するという電子書籍用の特別なプロパティです。このプロパティは自分も詳細を完全に理解できているわけではないので、もしかするとストアによっては完全に再現できない可能性があります。

（少なくともKindleとBOOK☆WALKERにおいてはこのやり方で問題ありませんでした）

　これで、〝特別な領域を作るためのクラス〟を作ることができたので、あとはステータス表を記述する際に、この領域で表全体を囲みます。

<div class="Status_Table">

<table>

（中略）

</table>

</div>

　こうすることで、このdiv要素領域内のテーブルは、横書きと同じ見た目のテーブルとして表示することが可能となります。

　ちなみに自分の場合はこのdivクラス内で【 border-width】や【border-style】といったプロパティを使うことで、ボックスに沿って枠線を引いています。

　作りたい表の見た目に合わせて、自由にカスタマイズしてもらえるといいでしょう。

　また、この〝横書き領域の作成〟というテクニックは、応用すれば色んなことに使えます。

　例えば書籍の最後に置いている奥付ページも、このテクニックを使うことで横書き表示にしています。

　HTMLに存在するテクニックは、調べれば調べるほど、電子書籍にも応用できるものばかりです。

　ぜひ皆さんには、僕には想像もつかないような新テクニックを編み出していただいて、いつか僕に教えて下さい。

　スタイルについての話は今回で終わりにしたいと思いますが、質問や相談はお受けしております。