鷹野雅弘（スイッチ、DTP Transit）

<< 第13回へ | コラムTOPへ戻る |

第14回： InDesignからのePub制作（6）

書き出したePubファイルの編集　その3（CSSの編集）

引き続き、InDesignから書き出したePubをsigilを使って編集していきます。

今回はCSSを編集していきます。

第11回では［スタイル名のみ］オプションを選択して書き出ししました。
sigilの左サイドバーの「Style」を展開して、「template.css」を確認してみましょう。

次のようにセレクターのみが入力されています。

div.generated-style {
}
div.x-orange- {
}
h1.h1 {
}
h2.h2 {
}
p.p {
}
p.h3 {
}

まずは、これをすべて削除します。

文書全体の設定

次のソースコードをコピーし、「template.css」にペーストします。

@charset "UTF-8";
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  color: #333;
  line-height: 1.4;
}

bodyに対して行う設定は、文書全体が対象になります。
ここでは「フォントをヒラギノ角ゴ Pro W3、文字色を80%グレー、行送りを140%にする」という設定を行いました。

• 「@charset "UTF-8";」は文字コードの指定です。CSSファイルの1行目に入れておきます（これがない場合、日本語が文字化けすることがあります）。
• iBooksで使えるフォントはヒラギノ角ゴW3/W6、ヒラギノ明朝W3の3書体のみ。
• 文字色を少し薄くし、次に設定する見出しを100%にすることで、メリハリがつく。
• 行送りは、欧文組版を前提にしているため、デフォルトは105-110%程度のため、140-160％くらいに設定します。単位を付けず、1.4のように指定します。

見出しの設定

次のソースコード「template.css」にコピー&ペーストします。

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  color: #000;
  clear: both;
}

h1からh6までの見出しに対して「太字、文字色は黒」さらに、回り込みがあった場合、見出しが出現したら回り込みを解除する、という指定です。

リンク設定されている画像の枠線をなしに

次のソースコード「template.css」にコピー&ペーストします。

img {
  border: none;
}

リンク設定されている画像には、2ピクセルの青い枠線が表示されます。上記のソースコードを記述しておけば、この枠線が表示されません。

中央揃え、右揃え

次のソースコード「template.css」にコピー&ペーストします。

p.center {
  text-align: center;
}
p.right {
  text-align: right;
}

HTMLのソースコード内のp要素で<p class="center">と記述すると中央揃え、<p class="right">と記述すると右揃えになります。

画像の回り込み

次のソースコード「template.css」にコピー&ペーストします。

img.left {
  float: left;
  margin: 0px 20px 20px 0px;
}
img.right {
  float: right;
  margin: 0px 0px 20px 20px;
}

HTMLのソースコード内のimg要素で<img class="left">または<img class="right">と記述すると画像が回り込み、さらに文字列とのアキが20ピクセルとらえます。

表組み（1）枠線あり

次のソースコード「template.css」にコピー&ペーストします。

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  margin: 1em 0px;
  border-spacing: 0;
}
th, td {
  padding: 3px 6px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
th {
  font-weight: bold;
  text-align: left;
  background-color: #f9f9f9;
  white-space: nowrap;
}

これによって、表が次のような体裁になります。カラーの値は変更してください。

• 薄いグレーの罫線ががつく
• セル内にも余白が生じる（上下3ピクセル、左右6ピクセル）
• 見出しセル（th）の背景色は薄いグレーに

表組み（2）枠線なし

table.noborder {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 0px none;
  border-left: 0px none;
  margin: 1em 0px;
  border-spacing: 0;
}
table.noborder th, 
table.noborder td {
  padding: 3px 6px;
  border-right: 0px none;
  border-bottom: 0px none;
}

HTMLでtable要素に「 class="noborder"」を付けると、テーブルの枠線が消えます。

まとめ

今回、ご紹介したCSSのソースコードは、共通して使えるものです。まとめたものをCSSファイルとして保存しておくとよいでしょう。

［Digital Editions書き出しオプション］の［目次］カテゴリーで［既存のCSSファイルを使用］オプションをチェックし、そのCSSファイルを選択すると、そのファイル内のCSSがコピーされ、ePub内のCSSファイルに書き込まれます。

<< 第13回へ | コラムTOPへ戻る |

ホーム

　
• 
• 
• 
• 
• 
• 

• 
•