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

3-3.CSS（ちょう しんどい すたいる）

　2回にわたって続けてきた電子書籍制作者向けの実践CSS講座めいたものですが、ここからちょっとレベルが一段上がります。

　というのも、ここまではWEBでも共通する、基本的な仕様を使ったものばかりで、ターゲットもあくまで文字情報のみ。

　行き詰まったときもググれば簡単に問題解決の方法が見つかるし、自分好みにカスタマイズすることも簡単です。

　しかし、今回ご紹介するのは書籍制作で中々避けては通れない、本文を支える重要な要素に対する制御です。

４．挿絵のスタイルを指定しよう

　というわけで、今回は文中の挿絵についてのお話です。

　まずでんでんマークダウンで画像を貼り付ける場合は、例えば【sample.jpg】というファイルを貼り付けたい場合。

　

　といった形に記述します。サンプルの部分は空白のままでもOKです。詳しい仕様については公式のハウツーを注意深く何度も読んで確認しましょう（投げ

　でんでんコンバーターにはテンプレート用のCSSが入っているので、ただ貼り付けるだけでも充分挿絵としては機能しますし、下手にいじって表示が崩れるよりは確実かも知れません。

　また、例えばプレビューソフトや自分のKindle端末で上手く表示できたとしても、読者が自分と同じ環境と端末で読んでくれるとは限りません。スマホか、タブレットか、PCか。縦起きで読むかも知れない、目が悪くて文字サイズを大きくしているかもしれない。条件に応じて無数のパターンを予想して、慎重な実証と試行が求められることになります。

　とはいえ、でんでんコンバーターのテンプレート用CSSでは画像の用途を限定していないので、そこまで厳密な指定が行われていません。なので、例えば位置を変えたいとか、大きさを画面いっぱいに広げたいといったこだわりがある場合、カスタマイズはやはり必要となってきます。

　そうした挑戦心を持つ人に向けて、とりあえず自分が知っている限りの部分については、橋渡しとして伝えてみたいと思います。

　正直僕自身、自分が書いたスタイルが、なぜ思い通りにいったのか、仕組みについて完全に理解しきれていない部分がありますので、その点についてはご容赦ください。

　まず、でんでんコンバーターに入っているテンプレートCSSの内容を先にご紹介します。

img {

width: auto;

height: auto;

max-width: 100%;

max-height: 100%;

}

　まず、【width】【height】というのは、それぞれ〝幅〟と〝高さ〟という意味です。

　一点注意しておいてほしいこととして、前回まで「縦書き電子書籍では横と縦の意味が入れ替わる」と再三注意してきましたが、画像の指定に対してだとこの法則が当てはまりません。

　画像の表示は縦書きでも横書きでも、回転したりはしないので、画像の縦幅は縦幅のままとして定義が変わりません。

　【auto】のプロパティは、表示される画面の大きさや状況に応じて、ブラウザ側に縮尺を文字通りに自動決定させるという指定です。なので、このプロパティを使う限り、例えば画像が画面外にはみ出して表示されてしまったり、半端に切れてしまったりといった現象が起こる心配はありません。

（よっぽど頑張ればauto指定しててもそういう状態をむりやり起こす方法はあるんですけど）

　また、これは経験則ですが、画像サイズを指定する場合はheightかwidthのどちらかを、必ずautoに設定しておくようにしてください。

　たとえば高さを固定値にして、幅を可変値(auto)にした場合、表示される画像の大きさはまず高さが先に決まって、そのあとで画像の幅をブラウザが計算してくれます。

　これを両方固定値にしてしまうと、そのサイズに合わせようとした結果、画像が不自然に縦や横に伸びて変形してしまうことがありえます。

　そういった事態を防ぐための冗長性として、autoの指定を利用するのが良いと個人的には思います。

　次に【max-width】【max-height】は画像サイズの拡大縮小の最大値を決定するものです。例えば200×200pxの画像を貼り付けた場合、【max-width:80%】の指定をしておけば、160×160pxの大きさより勝手に大きくなったりすることはありません。

　ただし、あくまで最大値というだけなので、このサイズで絶対に決まるというわけではありません。また、最低値を決める場合は【min-width】【min-width】で指定を行います。

　【auto】のプロパティ指定はブラウザによっても解釈がかなり変わる部分なので、断言することはできませんが、このデフォルトのスタイルだと、表示画像は〝縦横の大きさを元の画像サイズと同じにしたまま表示〟を最初に行おうとします。

　仮に画面サイズが小さくてそれが出来なかった場合は、「縦か横のどちらかをなるべく大きくなるように表示」をしようとします。

　WEBサイトを見るときのブラウザウィンドウもそうですが、電子書籍を表示する端末は形状が決して一定ではありません。人によってはタブレットを横置きにして読む可能性も考えられます。ですが一般的に、縦長の画像は縦の最大値が先に決定されると思うので、上下ギリギリの大きさに表示される形となります。

　ここまでで、一見挿絵の表示に問題はないように思われますが、実はこのまま貼り付けて変換すると様々な点で見栄えに問題が発生します。

　第一に、本文内に画像を挿入すると、画像のすぐ横に文章が並んでしまって、左右の文字が読みにくくなってしまう。特にこれは、画面を横長の状態で読んだときに目立つ問題です。

　次に、画像の配置が上付きになってしまっている点。できれば画像が画面中央に寄るようにして、上下の隙間が均等になるよう調節したいと思いました。

　画像は文章と要素が違うので、【text-align】のようなプロパティで指定によって、位置を真ん中よせにすることができません。

　その辺りを考慮して、自分は以下のような形で画像用のスタイルに改良を加えました。

img {

display: block;

height: 95%;

width: auto;

margin-top: auto;

margin-bottom: auto;

margin-left: 2.0em;

margin-right: 2.0em;

max-width:100%;

max-height:100%;

}

　なんだかやたら行数が増えましたね。

　僕自身、久しぶりに見返して「え、なんだっけこれ」と250度ぐらい首をひねってから、CSSの解説書を読み返しつつ自分がしたかったことを必至に思い返してました。

　まずデフォルトと違うのが【height】の部分で、これを100%に指定しています。これは……なんでだろう。別にautoのままでも良かった気がする（焦）

　確か、あとで追加しているプロパティ要素と干渉してしまうので、それを解消するために変更したはずです。

　それがこの下にある【margin-top】と【margin-bottom】で、この二つをautoに指定することで、不思議なことに上付きだった画像が中央に寄るよう自動調節されます。例えるなら画像の上下に、同じ圧力で膨らむ透明の風船が配置されていて、その二つが同時に膨らむことで同じ幅の隙間が空く、といったイメージの仕組みだと思います。

　この方法で位置補正をする場合、【height:auto;】のままだと風船の圧力で画像自体がつぶれてしまうので、95%という固定値を与えています。

　次に、左右幅ですが、これは単純に【margin-right】【margin-left】で2emの隙間を空けています。これを指定するだけで、デフォルトの状態に比べて左右に隙間が空いてくれるので、かなり見やすい絵面になってくれると思います。

　複雑なスタイル指定をしたくはないという人も、とりあえずこれだけは指定しておくことを個人的には推奨します。

　また、僕の出してる書籍を読んでくれた方は、ある点について気付いたかと思います。それは本文中に挿絵だけでなく、キャラクター紹介用の画像も挿入されているということについてです。

　これらは挿絵と役割の違う画像であるため、見せたい見せ方も異なります。

　まず、スタイルを変えたい画像を文中に貼り付けるとき、でんでんマークダウンのハウツーにある方法だと、以下のように変換されてしまいます。

<img src="sample.jpg" alt="サンプル" />

　これだと、この画像に新たなスタイルを付け加えることができないので、スタイルを別指定したい画像については本文中で以下のようにHTMLを直接記述してクラスをあらかじめ指定しておきます。

<img src="sample2.jpg" class="subimg" alt="サンプル２" />

　この【class="subimg"】という部分が、この画像に付加させているクラスです。

　例えば、「サブイメージは他の画像と違ってサイズを小さめにしたい」といった場合、以下のようにスタイルを記述します。

.subimg{

height:70%;

}

　こうすると、【subimg】をクラスに指定した画像は、70%の大きさで表示がされます。縦幅以外の要素については、【img】要素に対する指定がそのまま同じく引き継がれます。

　ここで多くの方が疑問に思われるのではないかと予想されるのが、【img】要素に対する95%の指定と70%の指定が競合しているという点です。

　CSSに書いた順序が上か下かで優先度が決まると以前に書きましたが、順序を逆にすれば95％になるのではないか、と思われるかもしれません。

　ですが実のところ、この場合については70%の指定が必ず優先されます。

　これは、スタイルの優先順位と呼ばれる性質で、一般的にスタイルは対象が限定的であるほど、より優先度が高く解釈されるようになっています。

　これは日本語風に言えば、「imgは全て90%で、ただしsubimgクラスだけは70%で」という解釈になります。

　これまで紹介した方法を応用すれば、例えば以前に書いたような「章分け用の記号を画像で作って、文中に挿入する」といったテクニックも、簡単に実践できるようになります。

　ただ、小さめの画像を作ってそのままの大きさで貼り付けるだけだと、文字サイズを小さくしたとき画像と文字のバランスが崩れてしまうかもしれません。そのときはサイズを【em】の単位系で指定すればなんとかなると思うのですが、どうなんだろう。できるのか分からないので誰か試してみてくださいｗ

　ここまでは汎用的に使えるスタイルの基礎的な部分について紹介してきましたが、次回からはちょっと、個人的な遊びで使ってみた小技的な要素について紹介していきたいと思います。