"Sigil"に適合した"XHTML&CSS"/"横幅サイズ"を指定した"サンプル"Webスクリプト ......

| | コメント(0) | トラックバック(0)

 "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)













【 SE Assessment 】 【 プロジェクトα 再挑戦者たち 】








トラックバック(0)

このブログ記事を参照しているブログ一覧: "Sigil"に適合した"XHTML&CSS"/"横幅サイズ"を指定した"サンプル"Webスクリプト ......

このブログ記事に対するトラックバックURL: http://adhocrat.net/mt/mt-tb.cgi/1348

コメントする

2020年11月

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          














関連サイトへのリンク


  • 電子書籍(eBooks)制作にフォーカスしたサイト
  • 明けない夜はないことを確信するサイト
  • Green(地球環境改善)にフォーカスしたサイト
  • ソフトウェア技術者やSEのための評価と育成、人事考課制度を考えるサイト
  • さまざまな業種・業態でご利用可能なモバイル活用の予約システム!
  • 創作小説『海念と保兵衛』のサイト
  • 創作小説『かもめたちの行方』のサイト
  • 当ブログ推奨の商品を展示したAmazon ストアー!
  • 当AdhocBlogブログの過去のエントリー
  • 株式会社アドホクラット当時のサイト

★売れ筋! No.1!
家庭用"放射線測定器"

日本通信 bモバイルWiFi ルータ+1 ヶ月定額SIM BM-U300W-1M
価格:¥ 20,208
国内配送料無料 Amazon





このブログ記事について

このページは、yasuo hiroseが2010年12月18日 00:01に書いたブログ記事です。

ひとつ前のブログ記事は、
 「"ePub editor=Sigil"との付き合い方/Sigilは"CSS"では自動的にコードを書き込む ......
です。

次のブログ記事は、
 「"Calibre"作成の"ePub"("自炊"PDFからの作成)を"Sigil"で再編集する意味と方法 ......
です。

最近のコンテンツは、
 インデックスページ
で見られます。

過去に書かれたものは、
 アーカイブのページ
で見られます。

年月別アーカイブ

最近のトラックバック