"Sigil" での "ePub 変換" を上手に実行するには、何の下準備もない "丸腰" で臨むのではなく、できれば "XHTML & CSS" で書かれた "Webスクリプト" を用意したいものだ。今日も、昨日に引き続き<(2) スクリプトの修正・改造をどう適切に進めるか。>について書こうとしている。
もちろん、何も "おみやげ" が無くても "Sigil" はもてなしてはくれる。
<Book View>モードにテキストの "直接入力" をするならば、<Cord View>モードの画面の方に "Webスクリプト" が "自動作成" されるからだ。この "Webスクリプト" に少しづつ手を加えながらいわば "積み上げ" 方式でお望みの "Webスクリプト" を完成させるという方法もアリには違いなかろう。
だが、まともなのは "改行" だけで、ほかにスタイル("CSS")は何も設定されていない文章表示というのは、"ページ・レイアウト" とは呼べないだろう。もちろん「デバイスにあわせたレイアウト」には程遠い状態に留まっている。
そこで少なくとも注目せざるを得ないのが、"Webスクリプト" に、文章などのコンテンツ表示の "横幅サイズ" なのである。これが設定できると、"ページ・レイアウト" を手堅く決めていくことがかのうだ。だが、この指定こそは、"CSS" ( "Sigil" では、<Styles>フォルダに格納される)の守備範囲にあり、前記のような "直接入力" では "CSS" ファイルは自動生成されようがないわけだ。
そこで、"CSS" ファイルを外から "移植" しようというのである。
ところで、表示の "横幅サイズ" に関しては、<"iPad"と"iPhone4/iPod touch"の両サイズ向けにePub電子書籍制作を進める技法!(当日誌 2010.12.14)> を参照していただくとして、今回は、「どうする?! "CSS" 」について説明したいと思う。
とりあえず、表示 "横幅サイズ" の点だけに限定した "XHTML & CSS" のサンプルを作ってみた。( "XHTML & CSS" で書かれた "Webスクリプト" は、"XHTML"と"CSS" との両者がセットとなって機能する。)
"直接入力" 後の、ダラリと画面横幅いっぱいに間延びした文章表示を、さしあたって "iPad" の表示可能幅 "547px" にどのように編集するか、というのがテーマとなる。
"Sigil" で "Section0001.xhtml"の<Book View>モードにテキストを "直接入力" すると、<Cord View>モードの方には、下記のコードのうち "青字の部分・行" 以外がコードとして作成れるはずである。
そこで、とりあえず、二か所ある "青字の部分・行" を付け加えておこう。
――――――――――【 "Section0001.xhtml" のコード 】――――――――――
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:lang="ja">
<head>
<title></title>
<link href="../Styles/base.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
――直接入力したテキストがスクリプト化された行――
</div>
</body>
</html>
――――――――――――――――――――――――――――――――――――――
次に、下記のコードは "CSS" であるが、これをテキストエディタでファイルとして作成する。文字コードは "UTF-8" とし、ファイル名称は "base.css" とでもしておく。保存場所は任意だ。
――――――【 フォルダ<Styles>に格納すべき "css" のコード 】――――――
@charset "UTF-8";
*{padding: 0; margin: 0;}
body{
font-size: 100%;
text-align: center;
font-family: "MS UI Gothic",sans-serif;
padding: 0;
margin: 0;
}
#wrapper{
text-align: left;
margin: 0 auto 0;
width: 547px;
background-color: #ffffff;
}
――――――――――――――――――――――――――――――――――――――
"Sigil" の<Book Browser>の<Styles>のフォルダは、現在 "空" のはずだが、このフォルダを "右クリック" して<Add Existing Items...>をクリックの上、先に保存した上述の "base.css" ファイルを読み込む。
これで、"XHTML & CSS" のセットが整ったことになり、"Section0001.xhtml" の<Book View>モードを開くと表示 "横幅サイズ" を "547px" に設定した場合の表示状態が確認できることになる。
なお、このサンプルはあくまで表示 "横幅サイズ" にのみ着目し、"原理的な仕組み" を説明するための単純な "CSS" でしかない。実際の "CSS" では、膨大な種類の設定とそのためのタグが存在する。いろいろとタグを付け足していけばよいわけだ。
"Sigil" を上手に活用するためには、"XHTML & CSS" の "Webスクリプト" を上手に操れることが必須条件だという、ほんの一例に過ぎない...... (2010.12.17)
コメントする