自作小説の "ePub 電子書籍" 化に一段落した今、専らスキル・アップのために実践しているのが、"自作 Web ページ" をより忠実に "ePub 電子書籍" 化する作業だ。
"より忠実に" というのは、自己に課したルールなのである。さもないと、"ややこしい部分" をやり易いように逃げてしまい、スキル・アップには繋がらないと思えたからなのである。
自分が作った Web ページ でも時が経つと、まるで他人が作ったもののように "理解困難" となりがちで、良いトレーニング／"Case-Study" となっている。構造的に作り直した方が適当かと思えることもあるのだが、とにかく、表示をより忠実に再現すべく "ePub 編集・変換" を図るよう努めている。
これが、実に手応えのあるトレーニングとなっているのである。以前、 ＜"ePub電子書籍"制作の訓練には、既存の"Web ページ"の"ePub 変換"が良さそう!? （当日誌 2010.01.03）＞ と書いたが、まさにその通りだと思われる。
"自作 Web ページ" の中には、比較的古いものでは、まだ "XHTML & CSS" の方式を使わずに、いわゆる "table" 方式をガンガン使って "力ずく" で構成していたものもあったりする。
Web スクリプト/タグ で "table - tr - td" を多用してレイアウトを構成する方式( "table" 方式)は、作る際には比較的取っ付き易いからついつい多用してしまうのだが、とにかく "修正・更新" などの "メンテ" には手間が掛かる代物だと言える。
"XHTML & CSS" の方式でも、一応この "table" 方式の考え方は踏襲されてはいるが、どこか "異端児" の感が拭い切れない。
いや、今日のテーマは、この "table" 方式ではなくて、こうしたレイアウトのものを "XHTML & CSS" 方式に近づけようとするならば、実に骨が折れるということである。
したがって、新たに "Web ページ" を作る際には、部分的に "table" 方式を使うことはあるとしても、極力控えてオーソドックスな、また、"ePub" と親和性の高い "XHTML & CSS" 方式で書き上げるべきかと痛感している。
ところで、"XHTML & CSS" 方式で書き始めた "Web スクリプト" で "ややこしい部分" に遭遇して困惑する時に、自分は次のような "チェック技法" をしばしば使っている。
これは知る人ぞ知る方法であり、"技法" とまで言えるものかどうかは別としても、"困惑時" に "道標(みちしるべ)" の役割を果たしてくれることは確かである。
この近辺の話は、ある程度 "XHTML & CSS" 方式の基礎を踏まえた人でないと、「えっ、それってな～に？」となりそうだが......。
"XHTML & CSS" 方式では、"XHTML" 側にさまざまな "要素" コードを宣言しながらコンテンツ部分を作成して、その "要素" のいわば "プロパティ" を "CSS" 側で定義するということになるわけだ。
ところが、この両者の関係がよく見えない場合には、どっちがどう間違っているのか、何が "有効" で何が "無効" となっているのかが分からなかったりする......。
そんな場合、その "要素" がどんな "空間的広がり" を持つものかを、いわば "見える化(可視化)！" させてみると、おかしな設定も自覚可能となる、というものであろう。
そんな効果を果たすために、以下のようなコードを "CSS" 側の当該の "要素" 定義の末行に書き加えてみるのである。
border: 1px solid #cccccc;
この意味は、当該の "要素" の "空間的広がり" の "border(境界)" に、"1px(1 ピクセル)" の "solid(実線)" を "#cccccc(灰色)" で表示しなさい、ということなのである。実線の色に関しては、たまたま自分は "#cccccc(灰色)" としているが、もっと目立つ "#ff0000(赤)" であっても、"#000000(黒)" であっても差し支えない。
要は、「えっ？ こんな広がりだったの？！」がわかればいいわけだ。
こうした方法によって分かることは、時には、"要素" の中に "(子)要素" を入れたつもりが入っていなかったり、とある "要素" を "センタリング" しようとしていたけれど、その "要素" 自体の見えない部分での幅が親要素の横幅目一杯であったりして、先ずはその幅を縮めてからでないと "センタリング" ができない......、などの点が了解されたりするわけだ。
なお、 "要素" の "センタリング" に関しては、とかく "iPad" での "要素" 内指定の "text-align: center" の "効き" が悪くて悩まされたものである。"Sigil" では表示ＯＫとなっていながら、いざ "iPad" へ送ると、"左寄せ" に終始するというように......。
"見えない敵(?)" と闘うには、そいつを "白日のもとにさらす" のが先ずは定石だと思えるわけだ...... (2011.01.14）
コメントする