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

3. CSS（ちょう すごい すたいる）

　元商業作家の僕ですが、これから皆様にお伝えしたいと思うのは小説の書き方ではなくよりにもよってCSSの書き方です。

　そもそも売れる小説の書き方なんてもの分かってたら未だに作家続けてるからな！　それに仮に知ってたとしても教えてやらねーしな！！

　というわけで僕が皆さんにお教えできるのは、残念ながらニワカ仕込みで身につけた、電子書籍で使える実用的なHTMLとCSSのテクニックについてです。

　技術的に適正かどうかは分かりませんが、使ったものを実際に出版してモノが売れて今のところ致命的なバグも出ていないようなので、少なくとも実用的であるという点については信じていただいて大丈夫です。

　ただし、スタイルの知識なんて無くても出せるのが、それはそれで電子書籍の良いところです。なので、わざわざ苦労していじるつもりのない人は、無理に覚える必要はないものです。小説本文以上に膨大な量のチェックと修正が待ち受けていることは保証します。

　しかし、彼の有名な〝キン肉王家3つの心得〟にはこう書かれています。「正義超人界平和維持の道に近道はない おだやかな道とイバラの道の二通りの道があるとすればイバラの道を進め」と。

　仮にも正義超人の道を目指す皆さんであればあえてこの苦難の道を――あ、はい。もういいですね。始めます。

　まず「Wikipedia」によると、CSSとは〝Cascading Style Sheets〟の略称で、まあなんかスタイルをカスケードするシートってことみたいです。

　日頃インターネットを利用していて、CSSを利用したサイトを見たことがないという人は居ないでしょう。

　CSSは本来、WEBページの本体であるHTMLの文書に対して、「この文字はこの大きさにする」とか「このタグがついた部分は右にずらす」といった見た目のルールを書いた、一種のルールブックと考えた方が理解は早いかもしれません。

　なのでスタイルシートを書くと言っても、実際には「既に用意されているテンプレートに新たなルールを付け加える」だけなので簡単です。

　ただし、「電子書籍のみをターゲットにしたCSSの書き方」というような本は、今の所、皆無と言っていいほど存在しません。

　なにぶん需要がまだ少なすぎるので、日夜色んな電子書籍作家さんたちが、あれこれと自分で方法論を築き上げては、個々に自分のサイトなどで紹介されていたり、たまに作家同士で技術交換してる程度のアングラなものです。

　ですが幸いにも、電子書籍とWEBページの違いは、乱暴な言い方ではありますが、表示するブラウザが違うだけみたいなものです。基本的なルールについてはかなり共通していますので、WEBページの作り方講座みたいなサイトや本だけでも、あればかなり参考になるかと思います。

　問題が起りやすい箇所やその解決策も被っていることが多いので、「○○　できない」でググれば案外簡単に先達の残してくれた記述が見つかることでしょう。

　おそらく自分でサイトを作ったり、ブログのスタイルをいじったり、学校の授業で習ったことがあるなどの経験があれば、さほど難しくないと思います。

　ただし、あまり基本を理解せずに無茶な指示を加えてしまうと体裁が崩れたり、コンバートできなかったり、生成したファイルがエラーを含んでストアに登録できなくなったりしてしまいます。

　また、既にあるルールを上書きするようなルールを加えてしまうと、問題の無かったはずの箇所の体裁まで崩してしまう危険性があります。

　最低でもスタイルを変更した際は、生成したファイルをきちんと確認して、思わぬ箇所に問題がでていないか充分確認するようにしましょう。僕はそれを怠って何度か泣きを見ています。

　また、ここで紹介するテクニックはほとんど僕が自分の出している書籍で実際に使っているものばかりなので、実際に買って見ていただけるとかなり理解が早まるんじゃないかと思います。

　ほら、大学とかで教授が自分の書いた教科書を生徒に買わせるやつあるじゃないですか。あんな感じのあれで是非一つ。

１．文字の位置を変える

　ブログを書いた経験がある人なら、「この1行だけ左に寄せたい」と思ってブログの機能で左寄せをしたことぐらいあるんじゃないかと思います。

　小説においても例えば、『終わり』の文字だけ下に持って行きたいとか、引用文をページの真ん中に配置したいとか、あったらいいなと思う機能の一つではないかと思います。

　たしかにスペースを連打しまくって、むりやり下の方の位置に持ってくるという手が、もっとも早いことかと思います。

　ただ電子書籍という媒体では、文字の大きさも画面の大きさも、読む人次第で自由に変えられるのが魅力です。たとえ自分の確認した環境で上手く配置できていたとしても、読者の端末で再現できているとは限りません。

　そういうときのために、文章に「この文字は位置を変える」というルールを指定するのがCSSの役割というわけです。

　今回は、ある行を縦書きであれば下に、横書きであれば右に持ってくる方法を紹介します。

　具体的には、CSSのファイルをテキストエディタか何かで開いて、以下の記述を加えます。

Tex_End {

text-align: right;

}

　これによって〝Text_End〟というルールが新しくスタイルに追加されました。{}の中身は、このルールが何を示しているかの説明です。

　この〝Text_End〟の部分は【class】と呼ばれるもので、名前はCSSを書く人が好きに決めてしまって大丈夫です。ただし、記号はハイフンとアンダースコア以外使わない、既に使われている名前は使わない、あとでわかりにくい名前にしないなど、気を付けてください。

　ルールの中身については、日本語風に言えば「テキストの位置を変える：右に」っていう感じです。

　そして、本文で文末に寄せたい文章があれば、その文章の前後へ以下のような記述を行います。

<p class="Text_End">最後に寄せたい文章</p> 　

　これは日本語風に言えば、まず〝p〟は「文に対する指示です」という宣言で、〝class="Text_End"〟という部分が「この文にText_Endというクラスを当てはめます」という意味になります。

　このクラス名は先ほど自分で決めたものなので、ブラウザ側はクラス名を参考にしてさきほどのルールをこの一文に当てはめてくれる、といった仕組みです。

　ここで一つ疑問に思って欲しいのが、「右に」と書いているにもかかわらず、縦書きでは「下に」文が寄せられるという点です。

　これが電子書籍でスタイルを改良する際、もっとも陥りがちな落とし穴ですが、横書きにおける右は下、下は左――といった感じに、名前が90度傾いてしまっています。

　なぜこんなことが起きるのかというと、電子書籍に使われている縦書き表示は、本来横書きで表示される文章を、90度傾けて表示しているという仕組みだからです。

　なので英語圏の横書きに対してしか想定されていないCSSを日本の縦書き文化に当てはめると、かなり難解に感じる箇所が出てきます。

　この問題は、色んなところでたまに姿を現しては初心者を苦しめます。

　例えば「行と行の隙間を広くしたい」と思ったとき、縦書きでは「左右の隙間を広くしたい」にも関わらず、CSSでは「上下の隙間を広くしろ」と指示しなくてはなりません。

　さて、ここまでさも自分で考えたテクニックであるかのように語ってはきましたが、実はこの方法はでんでんコンバーターの開発者であるろすさんのブログでテクニックとして紹介されていたもので、それを丸コピーして書籍に利用したものです。

　その他のテクニックについても各種紹介されているので、初心者の方は一度目を通してみると良いかと思われます。

参考にしたブログ→http://blog.livedoor.jp/denden_proj/archives/31898341.html

　実は僕も最初はあまり、凝った体裁をやるつもりなんて全くありませんでした。

　しかし、どうしてもこの一文だけ下にズラしたいと思い、方法をググってこの方法を見つけて、試しに付け足してコンバートしてみました。

　そして1度目は見事に表示に失敗しましたｗ

　あとで思い返してみればごく単純なミスだったんですが、原因を探るためにあれこれサイトを調べまくり、HTMLとCSSの基本を学んでいくうちに、「もしかしたらもっと色んなことが出来るんじゃないか？」と欲が出てきてしまったかたちです。

　それに僕は元々、本好きではありますが本質の部分ではガチガチの理系肌なので、知らない技術に触れること自体がなんだか楽しくなっちゃったんじゃないかと思います。

　とりあえず一番簡単な事例を紹介して、基本的な部分と電子書籍特有の罠についてはお話しすることができたので、他のテクニックについても具体的な失敗談を交えつつお話ししていきたいなと思います。

　当初の予定より長くなってしまったので次回に続きます。