CSS レイアウトのカス
タマイズガイド V5

CAS-UB サポート2018 年 4 月 3 日発行 V5.0 初版

はじめにEPUB と Web ページではレイアウト指定に CSS を使います。CAS-UB ではレイアウトを「CSS のテーマ」として予め用意していますので、自分で CSS を作成する
手間を省くことができます。
一方、自分なりにレイアウトを指定したいときには、独自の CSS を用意して好きなレイアウトに変更できます。CAS-UB のテーマをベースにして一部だけを変更したり、あるいは CAS-UB のテーマを使わずに自分で用意した CSS だけのレイアウト指定もできます。
このためには CAS-UB の CSS テーマとはなにか、あるいは CAS-UB で XHTML の要素と属性をどのように指定しているかについての情報が必要です。本書はユーザ
ー・スタイルシートを作成する人向けに、主に、次の項目について説明しています。

1. CSS テーマとユーザー指定 CSS の関係
2. ユーザー作成スタイルシートを作るために必要な情報
a） CAS-UB の記事の種類・レベルの設定
b） CAS-UB が出力する HTML の要素と属性
3. その他の参考情報「CAS-UB User Guide V5.0」（以下、「ユーザーガイド」）の関連の箇所を参照しな
がらお読みください。 EPUB のレイアウトに関しては「ユーザーガイド」の第 12章

EPUB のレイアウト指定で説明しています。
本ガイドは、EPUB3 生成を前提に解説します。EPUB と Web ページのレイアウト

指定の違いについては「ユーザーガイド」の第 13 章

Web のレイアウトで解説して

います。
注

意

本ガイドは XHTML と CSS に関する基礎的な知識を前提としています。

i

目

次

はじめに

i

第 1 章 テーマとユーザー作成スタイルシートの関係

1

1.1 テーマの選択とリンク

1

1.2 調整用スタイルシートとユーザー・スタイルシート

3

第 2 章 CAS-UB による記事 XHTML

5

2.1 特徴5

2.2 記事の種類

5

2.3 タイトルと本文の見出しの関係

7

2.4 CAS 記法のブロック要素

9

2.5 CAS 記法のインライン要素

11

2.6 クラス属性、組み込みクラス属性と ID 属性

13

第 3 章 カスタマイズの例

15

3.1 タイトル・見出しのカスタマイズ

15

3.2 表の左右罫線とヘッダーの背景

21

第 4 章 旧版仕様など

23

4.1 記事の種類（旧版 V2.x 用）

23

参考資料

25

図表一覧

27

iii

第 1 章 テーマとユーザー作成スタイルシートの関係
1.1 テーマの選択とリンク
CAS-UB の「CSS のテーマ」とはシステムに予め登録してある CSS スタイルシー
トのセットです。テーマの登録は CAS-UB の管理者が行ないます。また、登録されているテーマは全ユーザーに共通です。
※ 特定のユーザー専用テーマの新規作成や、既存のテーマをカスタマイズして専
用 の テ ー マ と し て 追 加 す る こ と も で き ま す 。 詳 細 は 、 営 業 担 当 （ cas-

info@antenna.co.jp）までお問合せください。

テーマの選択EPUB 生成及び Web 生成の「一般」設定メニューの「CSS のテーマ」のリストに利用できるテーマの一覧が表示されます。お好きなテーマを選択して、設定を保存
すると次回の生成に反映されます。

図 1 EPUB3 のテーマを選択

テーマは、横書用と縦書用のものが用意されています。縦書の EPUB を生成する
ときは、縦書のテーマを指定してください。

1

図 2 横書のテーマと縦書のテーマ

テーマのリンク
各テーマはいくつかの CSS ファイルから構成されます。テーマを構成する CSS
ファイルは各記事 XHTML の<head>要素の中にリンクが設定されます。
たとえば、（ EPUB3 ）「CSS のテーマ」で「ミニマム」を選択して EPUB を生成し、本文の XHTML ファイルを開いて見ますと次の図のようなリンクが設定されています。この中で、“cas-common-epub.css”は CAS-UB の共通の CSS です。
“themes/minimun/common.css”が「ミニマム」テーマの CSS です。

図 3 テーマのリンク<link rel="stylesheet" href="themes/cas-common.css" type="text/css" /><link rel="stylesheet" href="themes/minimum/common.css"
type="text/css" />EPUB のバージョンとテーマ
CAS-UB では、EPUB3、EPUB2、Kindle 用 EPUB（EPUB2 をベースにした Kindle
独自形式）という生成形式毎に異なる種類のテーマを設定できます。テーマのファ
イル構成自体は３つの EPUB 生成で共通ですが、それぞれの生成において XHTMLにリンクする CSS ファイル（有効になるファイル）が若干異なっています。
本ガイドは、EPUB3 生成を前提に解説します。EPUB2 は日本ではあまり使われま
せんし、Kindle 形式は、EPUB3 準拠に切り替わりつつありますので省略します。

2

第 1 章 テーマとユーザー作成スタイルシートの関係

Web ページで使える CSS テーマ
Web ページを生成用の CSS テーマは、EPUB3 用の CSS テーマと共通です。

1.2 調整用スタイルシートとユーザー・スタイルシート
CAS-UB の共通スタイルシート、テーマのスタイルシート以外に「config.css」と「style.css」という CSS ファイルがリンクされることがあります。それぞれ「調整用スタイルシート」「ユーザー・スタイルシート」と言います。

図 4 調整用スタイルシートとユーザー・スタイルシート※ このほかに、フォント埋め込みを行なった場合、font.css をリンクします。この機能は CAS-UB
が自動的に設定するものでユーザーが関与することはできませんので、説明を省略します。

調整用スタイルシート
調整用スタイルシートは、CSS テーマの設定の一部を変更（調整）したときに追加されるスタイルシートです。詳細は「ユーザーガイド」の 12.2 CSS のテーマの機能と設定変更の項をご参照ください。

ユーザー・スタイルシート
ユーザー・スタイルシートは、ユーザー自身がレイアウトをカスタマイズするためのスタイルシートです。その役割については「ユーザーガイド」の 12.3 レイア
ウトのカスタマイズ（ユーザー・スタイルシート）の項を参照してください。

●

本ガイドはユーザーがレイアウトをカスタマイズする方法について説明します。

●

ユーザー・スタイルシートは、自身でエディタなどを使って CSS ファイルとして作成してくだ
さい。

●

CSS ファイルは、CAS-UB の「スタイルシート」画面からアップロードします。

3

●EPUB にリンクするユーザー・スタイルシートは、「style.css」のみです。それ以外のユーザー・
スタイルシートは、style.css にインポートしてください。

図 5 ユーザー・スタイルシートのアップロード

テーマを使わず、完全に独自の CSS を使いたいとき
テーマを使わずに、自分で作成した CSS だけでレイアウトを指定したいときは、「CSS のテーマ」を「未定」に設定します。CSS のテーマが未定になっているとき、

EPUB3 の XHTML には「sys-default」という名前のテーマがリンクされます。sysdefault テーマ CSS の設定内容は空ですので、自分で作成した style.css でゼロからレ
イアウト設定ができます。但し、その場合でも EPUB リーダーの既定値が有効となることに注意してください。

横書と縦書
ページの進行方向などは横書と縦書で異なります。ページの進行方向は CSS で指定するものではないので、縦書の EPUB3 を生成したいときは、「CSS のテーマ」で「縦書」の「未定」に設定して
ください。

4

第 2 章 CAS-UB による記事 XHTML
2.1 特

徴

ユーザー・スタイルシートを作るには、CAS-UB が出力する XHTML の要素・属
性・属性値について知っている必要があります。まず、CAS-UB で生成した EPUB
や Web ページが、どのような内容の XHTML ファイルになるのかを簡単に説明します。

1. CAS-UB は出版物を構成する各記事に、前書き、章、節、後書きといった種類を設定できます。記事の種類はクラス属性として設定しますので、CSS のクラス属性を使って記事の種類によりレイアウトを変更できます。
記事の種類とクラス属性については 2.2 記事の種類（ p. 5 ）を参照してください。

2. CAS-UB では記事に階層を設定できます。階層は記事単位で、例えば節を章の子供にするなどの、ツリー構造として、または記事の中で見出しレベルによる階層化の２通りでできます。階層については 2.3 タイトルと本文の見出しの関係（p. 7）を参照してください。

3. CAS-UB では、編集機能で作成する記事に加えて、EPUB などの生成時にシステムが自動的に生成する記事があります。

4. 編集機能で作成する記事には、CAS 記法で XHTML の要素と属性を設定できます。2.4 CAS 記法のブロック要素（p. 9 ）および 2.5 CAS 記法のイ
ンライン要素（p. 11）を参照してください。

5. システムが自動的に生成する記事には CAS 記法は使用できません。簡単
な XHTML の要素と属性のみが設定されます。

2.2 記 事 の 種 類
記事の種類についての説明は、「ユーザーガイド」の 4-1 記事の種類一覧を参照
してください。また、表 1 記事の種類（p. 6）に CAS-UB V5.0 の記事の種類とクラス属性を一覧にしています。

1. 記事の種類は、XHTML の body 要素に class 属性の値（クラス属性）として設定します。

5

2. クラス属性値は、表 1 記事の種類（ p. 6 ）のクラス属性の欄に示しています。

3. CAS-UB のテーマを構成する CSS ファイルには、記事の種類固有のものがあります。固有 CSS の欄に示しています。
固有 CSS は common.css の後にリンクされます。

表 1 記事の種類
記事の種類
未定
カバーページ
タイトル前
タイトルページ
タイトルページ（手作り）
権利関係
献辞
前書
目次

既定ファイル名

cover.xhtml
opening.xhtml

mltoc.xhtml

目次（手作り）※1（p. 6）
目次後
本文の扉
プロローグ
章扉※2（p. 7）

章のファイル名

クラス属性

固有 CSS

sys-default-ent
cover
before-title
opening
titlepage
rightsdedicationpreface
mltoc
mltoc

common.epub.css
common.css
common.css
opening.css
common.css
common.css
common.css
common.css
common.css
common.css

preface-after-toc
body-title
body-start
chapter-titlepage

common.css
common.css
common.css
common.css

chapter
sectionsubsection
subsubsectionbody-end
appendix
postface
acknowledgment
xnotesloft
referencesreferences-autopubl-index
profilecolophon
copyright

common.css
common.css
common.css
common.css
common.css
common.css
common.css
common.css
common.css
common.css
common.css
common.css
common.css
common.css
copyright.css
copyright.css_title.xhtml
章
節
項
目
プロローグ
付録
後書き
謝辞
xnotes.xhtml
巻末注釈
loft.xhtml
図表一覧
参考文献表（手作り）
参考文献表（bib から自動生成） references.xhtml
索引
プロフィール
奥付（手作り）
奥付※1

publ-index.xhtml

copyright.xhtml

EPUB3 の生成で「EPUB2 と互換の目次」を生成する場合、手作りの目次は、記事のファイル名先頭をアルファベットにしてください。記事の種類が「目次」に設定された記事のファイル名先頭がア

6

第 2 章 CAS-UB による記事 XHTML
ルファベットでない場合、epubcheck で「EPUB2 と互換の目次」（NCX）がエラーになります。
生成画面の 一般 で 【章扉を作る】をチェックすると、章タイトルのみの記事が自動生成され、元※2記事の章タイトルは非表示になります。

参考

旧版（V2.x）の記事の種類（p. 23）

2.3 タイトルと本文の見出しの関係
h1～h6 の見出し
CAS-UB の記事編集画面で、タイトルに入力した文字列は、head の title 要素と、
body の先頭の見出しランク１（h1）要素の内容として出力されます。
章・節などの記事本文には見出しランク１～６（h1～h6）を任意の回数マークア
ップできます。この結果、一つの記事に h1 要素～h6 要素が複数出現する場合があります。
一つの記事は、タイトルの見出しランク１（h1）と本文の見出しランク１～６（h1～h6）の出現範囲により、次のように階層化（レベル付け）します。

図 1 記事の中を見出しランクで階層化

グローバル階層化
CAS-UB では出版物の構造を、章・節・項・目といった記事ファイルを単位とし7

て階層構造（ツリー構造）で表現します。
出版物の階層構造は、記事編集画面の記事一覧で確認と編集ができます。

図 2 記事一覧による記事の階層表示※ 記事一覧は、記事編集画面で、[記事一覧 ] ボタンをクリックすることで、表示と非表示を切り替えられます。

class の level 属性値
EPUB の記事は、記事ファイル自体と記事の内部の２重の階層構造をもちます。
CSS で見出しのレベルでレイアウトを変更するには、見出しのランク（hn 要素の"n"の値）で決定するのではなく、出版物のルート（レベル１）からみた階層レベルを示す class 属性（leveln）を使って、見出しのレベルを指定する必要があります。

1.

記事自体のレベルは、body 要素の class 属性に、章は level2、節は level3 として設定されています。

2.

本文の中見出しのレベルは見出しランク要素（hn）を div 要素でラップし、div の class 属性に level 値を設定しています。

8

第 2 章 CAS-UB による記事 XHTML

図 3 レベルの設定

2.4 CAS 記法のブロック要素
CAS 記法のマークアップで出力されるブロック要素とそのマークアップの方法
は次の表の通りです。
表 2 CAS 記法のブロック要素

CAS 記法
空行
タイトル入

要素

p
title, h1

段落
タイトルに入力したテキストは、head の title とh1～h6 要素と見出しをbody 直下の h1 の内容となる
本文中の h1 から h6 の見出しは div でラップしラップする div とそのて階層化。

class 属性、id 属性

ラップした div に階層をあらわす class=”

力枠
行頭の=の数説明

9

CAS 記法

要素

説明

wrapper leveln” を付与。
行頭の#

ol/li

見出しに対応する id 属性を付与。
番号付き箇条書き。
箇条書きの項目に続く行頭の##で箇条書きのネ

行頭の*

ul/li

ストとなる。
番号なし箇条書き。
箇条書きの項目に続く行頭の**で箇条書きのネ

行頭の*-- -|>>

dl/dt/dd
blockquote

ストとなる。
用語定義リスト
ブロック引用...
|<<---++++{{{

hr
hr class= "page-break”
pre

水平線
強制改ページ

table tr th/td

セル結合を利用していない簡単な表。

整形済みブロック

...
}}}
|=, |

ヘッダ行は<tr class="ah_head">となる。表を特殊化してない（[[[:tbl で囲んでない）ときは罫線を非表示とし、セル内容の位置揃えに使う。特
殊化した表では、罫線を表示したり、飾りをつ

[[[

div

けた表レイアウトとする。
ブロック範囲指定

ブロック範囲指定のク

5 種類の特殊ブロックにはキャプションをつけ

ラス属性値として、5 種ることができる。

...
]]]
特殊ブロック類の特殊ブロックを定[[[:fig

義済み<div class="fig">

図のブロック...

<p><img src=”XXX”]]]

alt=””XXX”></p></[[[:sum

div><div class="sum"＞

要約のブロック<div class="col"＞コラムのブロック<div class="ann"＞

注記（本文段落に付随する補足説明の文章）ブ...
]]][[[:col...
]]][[[:ann10

第 2 章 CAS-UB による記事 XHTMLCAS 記法

要素

説明

...

ロック

]]]
[[[:tbl<div class="tbl"＞

表のブロック<div class="caption">キ

特殊ブロック後ろの=以降のテキストをブロッャプションテキスト</

ク要素（div）の内容とし、div には class="caption"

div>

属性を設定する。特殊ブロック全体を div でラtable、svg を埋め込む

ップし、その div に id が付きます。
埋め込みブロックには、'__embededsection__ク...
]]]（[[[:XXX） =<<embed...

ラス属性を付与します。

>>$$

ブロックに MathML、行頭から始まる$$で数式をサンドイッチすると...

SVG、TeX を記述

ブロック数式とします。

$$<<ignore

無し

コメントアウトブロック...

ブロック内の記述を生成時にすべて無視しま>>す。

CAS 記 法 の 詳 細 に つ い て は 「 CAS-UB ユ ー ザ ー ・ ガ イ ド 」 (http://www.cas-ub.com/howto/
support.html) を参照してください。
オンライン CAS 記法リファレンス

2.5 CAS 記法のインライン要素
CAS でマークアップできるインライン要素は次の表の通りです。
表 3 CAS 記法のインライン要素

CAS 記法要素

説明**...**//...//

strongem

ボールド
弱い強調（一般にイタ__...__[[[:notice ...]]]^^...^^,,...,,[[[...]]]((...))<span class="notice">...</span><span class="notice">...</span>
sup
sub
span
<span class="note">...</span>リック）
アンダーラインアンダーライン
上付き
下付き
範囲指定
注釈を後注とする場
合、本文中には注釈番

11

CAS 記法

要素

説明
号のみを表示し、注釈

自動生成<span class="note-d">...</span>

本文は非表示とする。
後注処理したときの注番号（生成テキス((:footnote ...))<span class="note footnote">...</span>ト）
脚注は注釈の一種。

footnote トークンを追**:kenten など

例）<em class="kenten"> ... </em>

加する。
span, em, strong の<em class="kenten2"> ... </em>class 属性に kenten、<em class="kenten3"> ... </em>

kenten2、 kenten3 の 3
種類の値を設定して圏点の種類を表します。

{{{...}}}\\[[URL|...]][[! URL|...]]tt（EPUB3 で廃止）
br<a href="URL"> ... </a><a href="URL" class="important" ….>タイプライター
強制改行
アンカー
PDF 出力時に URL を
括弧内や注釈として表示する意図を表します。

[[> URL|...]]<a href="URL" target="_blank"….>

リンク先を別ウイン
ドウで開くオプシ[[#ID|...]][[##ID|...]]<a href="ID"> ... </a><a href="ファイル名#ID"> ... </a>ョンID による参照
別ファイル内の ID による参照。このときの ID は CAS-UB が自動的に生成したもの（次項参照）に限ります。

ID の生成見出し（h1～h6）とキャプション付きブロック範
囲指定、索引と注釈が ID 生成対象です。ラッパ(div 要素）にタイトル・テキストから ID を生成します。索引と注釈の ID はファイル内で連番を
索引

つけます。
索引は span、em、strong の class 属性で示します。

[[[:index
key=<span class="index">...</span><em class="index" key="でんししょせき"id="_3201105182003_2e_2e0">電子書籍</em>

索引語の指定単純な索引 key は独自拡張なので EPUB
出力時は削除。以下、

12

第 2 章 CAS-UB による記事 XHTMLCAS 記法[[[:index:nodisp

要素説明<em class="index nodisp" key="でんししょせ同様。
索引語を表示しない。

き"id="_3201105182003_2e_2e1"電子書籍</em><em class="mindex"

入れ子の索引

id="_3201105182003_2e_2e2"><strongclass="prim" key="でんししょせき">電子書籍</
strong>の<strong class="second" key="つくりかた">作り方</strong>を述べる。</em><em class="mindex"

入れ子の索引を 2 つ

id="_3201105182003_2e_2e3"><strong

作る

class="both" key="でんししょせき">電子書籍</
strong>の<strong class="both"key="つくりかた">
ルビ (ruby)

作り方</strong>を述べる。</em><span class="ruby"><span class="rb">被ルビ文字(((...|...)))</span><span class="rp">(</span><span

クアップを EPUB2 にclass="rt"> ルビ文字列</span><span

出力するときは classclass="rp">)</span></span><ruby><rb>被ルビ文字</rb><rp>(</rp><rt>ルビ

属性で設定します。
CAS 記法のルビマー

文字列</rt><rp>)</rp></ruby>

クアップを EPUB3 に

CAS 記法のルビマー

出力するときは ruby
要素を設定します。

{{...|...}}<img src="myimage.png" alt="..." />イメージと代替テキ$$...$$

MathML、SVG、TeX を$$でサンドイッチ

スト
インライン数式

2.6 クラス属性、組み込みクラス属性と ID 属性
CAS-UB では任意の要素にクラス属性、属性と属性値のペア、ID 属性をつけることができます。属性指定の方法については、「ユーザーガイド」8–34 記事内の特定位置に目印（ID）をつけるを参照してください。

クラス属性
CAS-UB のシステムで処理を組み込んでいるクラス属性については、「ユーザーガイド」の 9-2 組み込みクラス属性値一覧を参照してください。組み込みクラス属性には、CSS テーマで標準的なレイアウトを設定してあります。
ユーザー独自のクラス属性を設定して、style.css でそのレイアウトを設定すれば任意のレイアウト設定が可能になります。

13

属性と属性値
CAS 記法で属性と属性値のペアも指定できます。但し、EPUB で許可されていな
い属性と属性値は EPUBCheck などでエラーになりますので、使用はお勧めしません。

14

第 3 章 カスタマイズの例
CAS-UB V5.0 より、タイトルや見出しなどがカスタマイズしやすいよう、装飾や配置指定を最低限にとどめた CSS テーマ「ミニマム」と「ミニマム縦書」を追加しました。
以降は、「ミニマム」「ミニマム縦書」を例に、カスタマイズ方法を解説します。

3.1 タイトル・見出しのカスタマイズ
CAS-UB で 生 成 し た EPUB で は 、 CAS-UB の 1 つ の 記 事 が EPUB 内 の 1 つ のXHTML ファイルとなります。
各記事のタイトルは、<body>の直後に<h1></h1>で入ります。

<body>には、つぎのように記事の種類に対応したクラス属性が付きます。
表 1 本文記事のクラス属性
記事の種類

クラス属性

本文：章
本文：節
本文：項
本文：目

class="chapter level2"
class="section level3"
class="subsection level4"
class="subsubsection level5"
class="chapter level2 chapter-titlepage"class="body-start level2"
class="body-end level2"

章扉
プロローグ
エピローグ

level2～live5 は、記事一覧のツリー構造の上位から順に番号付したクラス属性です。CAS-UB 上での最上位（level1）は出版物そのものになるため、level2 が EPUBの XHTML での最上位となります。
例えば、style.css に level2 への設定を記述すると、本文：章、章扉、プロローグ、エピローグのすべてに適用されることになります。しかし、前書類や後書類も記事
一覧のツリー構造の最上位にあるため<body>に level2 が付けられています。前書や後書を使っている場合は、それらへ影響しないようにする必要があります。

15

図 1 記事一覧の構成例

章タイトルのカスタマイズ
章に類する記事の種類には、「本文：章」の他に「章扉」「プロローグ」「エピロー
グ」があります。
章

扉※ 「章扉」は、EPUB3：生成の一般設定で「章扉を作る」をチェックしておくと、「本文：章」の記事
タイトルのみのファイルが生成されクラス属性に'chapter-titlepage'が追加されます。元の記事では章タイトルのみが非表示になります。
※ 「本文：章」の記事がタイトルのみのときは、新たな記事は作らず <body> にクラス属性 'chapter-

titlepage'が追加されます。
※ 「プロローグ」「エピローグ」では扉は作りません。

（１）XHTML「本文：章」<body class="wrapper chapter level2"
id="e_2e_30_30_30_32_2e_E7_AB_A0_E3_82_BF_E3_82_A4_E3_83_88_E3_83_AB-_E3_83_AC_E3_83_99_E3_83_AB_32"><h1>章タイトル-レベル 2</h1><p>章直下の本文</p>「章扉」<body class="wrapper chapter level2 chapter-titlepage"id="e_2elevel_32_2eLEVEL_32_20_E3_82_BF_E3_82_A4_E3_83_88_E3_83_A
B"><h1>LEVEL2 タイトル</h1>「プロローグ」<body class="wrapper body-start level2"
id="e_2e_30_30_30_31b_2e_E5_BA_8F_E7_AB_A0_E3_83_AC_E3_83_99_E3_83_AB_32"><h1>プロローグ-レベル 2</h1>「エピローグ」<body class="wrapper body-end level2"

16

第 3 章 カスタマイズの例

id="e_2e_30_30_30_35b_2e_E7_B5_82_E7_AB_A0_E3_83_AC_E3_83_99_E3_83_AB_32"><h1>エピローグ-レベル 2</h1>（２）スタイルシート/* 章レベルタイトルの文字サイズを本文の 2 倍にする */body.level2>h1 {font-size:2em;}（３）表示例
スタイルシート適用前

スタイルシート適用後

記事の種類に前書類と後書類を使っていない出版物であればこれで問題ありません。
記事の種類に前書類と後書類を使っている場合、この記述では前書類と後書類のタイトルにもスタイルシートが反映されてしまいます。
前書類と後書類のタイトルに影響しないようにするには 'level2'は使えません。次のように、指定を反映させたい記事固有のクラス属性を列記する必要があります。
/* 章レベルタイトルの文字サイズを本文の 2 倍にする */body.chapter>h1,
body.body-start>h1,
body.body-end>h1 {font-size:2em;}※ 章扉には、'chapter'と'chapter-titlepage'の両方が付いているので、'chapter-titlepage'は指定する必要はありません。
※ 記事中に見出しのマークアップをすると、最初のレベル（'='が１つ）の見出しに<h1></h1>が付くので、タイトルのセレクタは<body>直後の<h1></h1>に対してのみ効くように'>'を入れます。

節見出しのカスタマイズ「本文：節」（記事一覧で「本文：章」直下レベルにある本文記事）のタイトルと、「本文：章」の記事中の最初のレベル（'='が１つ）の見出しが節見出しとなりますので、両方に効くように指定する必要があります。

17

（１）XHTML「本文：節」タイトル<body class="wrapper section level3"
id="e_2e_30_30_30_33_2e_E7_AF_80_E3_83_AC_E3_83_99_E3_83_AB_33"><h1>節-レベル 3</h1><p>節タイトル直下の本文</p>「本文：章」記事中の節見出し<div class="wrapper level3"
id="h_2e_30_30_30_32_2e_E7_AB_A0_E3_81_AE_E4_B8_AD_E3_81_AE_E7_AF_80-_E3_83_AC_E3_83_99_E3_83_AB_33"><h1>章の中の節-レベル 3</h1><p>節の本文</p>（２）スタイルシート/* 節見出しの文字に下線を付ける */body.section>h1,
body.chapter div>h1 {text-decoration: underline;}（３）表示例「本文：節」タイトル「本文：章」記事中の節見出し※ 「本文：節」タイトルと「本文：章」中の節見出しは、どちらもクラス属性'level3'が付いているので、'level3'だけでも指定できます。しかし、前書類と後書類の記事中にマークアップされた最初のレベル（'='が１つ）の見出しにも'level3'が付くので、注意が必要です。

項・目見出しのカスタマイズ「本文：項」「本文：目」と、それより下位レベルの見出しは、クラス属性'level4'～'level9'の指定でカスタマイズします。但し、前書き類と後書類の記事中に深いレベルの見出し（見出しのマークアップ'=='以上）を使う場合は、「本文：項」「本文：
目」にのみ作用するように指定する必要があります。

18

第 3 章 カスタマイズの例
表 2 level* とタイトル・見出しの関係

level

タイトル・見出し

level2 「本文：章」類タイトル

本文のセレクタ

body.chapter>h1,

前書き類と後書類のタイトル

body.body-start>h1,
body.body-end>h1

lebel3 「本文：節」タイトル

body.section>h1,「本文：章」類の'='見出し

body.chapter div>h1,

前書き類と後書類の'='見出し

body.body-start div>h1,
body.body-end div>h1

lebel4 「本文：項」タイトル

body.subsection>h1,「本文：節」の'='見出し

body.section div>h1,「本文：章」類の'=='見出し

body.chapter div>h2,

前書き類と後書類の'=='見出し

body.body-start div>h2,
body.body-end div>h2
body.subsection>h1,

lebel5 「本文：目」タイトル「本文：項」の'='見出し

body.subsubsection div>h1,「本文：節」の'=='見出し

body.section div>h2,「本文：章」の'==='見出し

body.chapter div>h3,

前書き類と後書類の'==='見出し

body.body-start div>h3,
body.body-end div>h3
body.level6

lebel6 「本文：目」の'='見出し「本文：項」の'=='見出し「本文：節」の'==='見出し「本文：章」類の'===='見出し
前書き類と後書類の'===='見出し
lebel7 「本文：目」の'=='見出し

body.level7「本文：項」の'==='見出し「本文：節」の'===='見出し「本文：章」類の'====='見出し
前書き類と後書類の'====='見出し
lebel8 「本文：目」の'==='見出し

body.level8「本文：項」の'===='見出し「本文：節」の'====='見出し「本文：章」類の'======'見出し
前書き類と後書類の'======'見出し
lebel9 「本文：目」の'===='見出し「本文：項」の'====='見出し

19body.level9

level

タイトル・見出し

本文のセレクタ「本文：節」の'======'見出し「本文：章」類の'======='見出し
前書き類と後書類の'======='見出し

前書類と後書類のタイトル・見出し
前書類と後書類のタイトル・見出しをカスタマイズする場合、カスタマイズ対象となる記事の種類のクラス属性を列記してください。
例.
「前書」「後書」「付録」のタイトルをカスタマイズする場合/* 前書、後書、付録のタイトル文字を赤にする */body.preface>h1,/* 前書のクラス属性 */body.postface>h1, /* 後書のクラス属性 */body.appendix>h1 { /* 付録のクラス属性 */color:red;}

前書類と後書類のクラス属性については、2.2 記事の種類（p. 5）を、ご参加く
ださい。
目次や索引などの自動生成の記事タイトルも、同様の指定方法でカスタマイズできます。

章扉のカスタマイズ
EPUB3 生成の一般設定画面で「章扉を作る」をチェックして EPUB3 を生成すると、記事タイトルが章扉として生成されます。
「章扉」の<body>には'chapter-titlepage'というクラス属性が付きます。章扉のタイ
トル文字列は<body>直後に <h1></h1> タグで入ります。
よって、「章扉」タイトルをカスタマイズするときのセレクタは body.chaptertitlepage>h1 となります。
例．縦書の出版物で章扉を左右中央配置にする
縦書の章扉タイトルは、そのままでは右寄りに配置されます。
縦書で左右中央配置にする方法はいくつかありますが、一長一短があり、すべてのリーディングシステムで問題なく表示されることを保証できる方法は今のところありません。
よく使われる方法としては、横書のページに縦書のブロックを配置するというものがあります。

EPUB3 生成の一般設定画面で「章扉の文字進行方向」に［横書］を指定すると、
20

第 3 章 カスタマイズの例

xhtml の<html>タグに'hltr'というクラス属性が付きます。縦書の CSS テーマには、<html>タグにクラス属性'hltr'が付けられたら文字進行方向を横書にする設定が含まれています。
文字の進行方向が横書のときに、タイトルブロックを縦書にして左右中央配置にするには、次のように指定します。
/* 章扉タイトルを左右中央配置にする */html.hltr body.chapter-titlepage>h1 {padding:0;/* タイトルのパディング指定リセット */margin-top:1em;/* タイトルの上を 1 文字空ける */margin-bottom:1em; /* タイトルの下を 1 文字空ける */text-align:left;/* タイトル行頭寄せにする */margin-left: auto; /* タイトルを左右中央配置にする 1 */margin-right: auto; /* タイトルを左右中央配置にする 2 */-epub-writing-mode: vertical-rl; /* タイトルを縦書にする */writing-mode: vertical-rl; /* タイトルを縦書にする */}※ 「章扉」にはクラス属性'.chapter-titlepage'の他に「本文：章」のクラス属
性'chapter'も付けられているので、「本文：章」タイトルをカスタマイズしていると「章扉」タイトルにも適用されますのでご注意ください。

3.2 表の左右罫線とヘッダーの背景
CSS テーマ「ミニマム」と「プレーン 2」の特殊化された表では、JIS の日本語組版ルールに従い左右の罫線を出していません。

表の左右に罫線罫線を付ける
CSS テーマ「ミニマム」と「プレーン 2」の特殊化された表で、左右の罫線を付けたいときは次の指定を'style.css'に追加します。
/* 特殊化された表の左右に罫線を付ける */.tbl table {border-left: thin solid #000;
border-right: thin solid #000;}

適用例（１）適用前21

（２）適用後表のヘッダーセルに背景色を付ける
ヘッダーセルに背景色を付けたいときは、次の指定を'style.css'に追加します。
/* 特殊化された表のヘッダーセルに背景色を付ける */.tbl th {background-color: #F0F0F0;}

適用例（１）適用前前例「表の左右に罫線罫線を付ける」の「（１）適用前」参照（２）適用後22

第 4 章 旧版仕様など
4.1 記事の種類（旧版 V2.x 用）◆ この記載内容は CAS-UB の旧版（V2.4 以前）向けのものです。最新の情報は2.2 記事の種類（p. 5）にあります。
記事の種類についての説明は、「ユーザーガイド」の 4-1 記事の種類を参照してください。また、表 1 記事の種類（EPUB3）（p. 23）に CAS-UB V2.2 の記事の種類とクラス属性を一覧にしています。

1. 記事の種類は、XHTML の body 要素に class 属性の値（クラス属性）として設定します。

2. クラス属性の値は、表 1 記事の種類（EPUB3）（p. 23）のクラス属性の欄に示しています。

3. CAS-UB のテーマを構成する CSS ファイルには、記事の種類固有のものがあります。固有 CSS の欄に示しています。

a） 固有 CSS は common.css の後ろにリンクされます。

表 1 記事の種類（EPUB3）
マ
記事の
種類

既定ファイル名

書

書

籍

籍

１

２

ノ

ニ

ー

ュ

ト

ア

１

ル

クラス属性

固有 CSS

１
未定
カバー

cover.xhtml

○
○

○
○

○
○

○
○

sys-default-ent
covercommon.epub.css
common.css

ページ
タイト

opening.xhtml

○

○

○

○

opening

opening.css

×

○

○

×

titlepage

common.css

ルペー
ジ（表
題）
ユーザ
ー作
成扉

23

マ
記事の
種類

既定ファイル名

書

書

籍

籍

１

２

ノ

ニ

ー

ュ

ト

ア

１

ル

クラス属性

固有 CSS

１
○
○
×

○
○
○

○
○
○

○
○
×

mltoc
preface
mltoc

mltoc.css
common.css
common.css

目次
謝辞
献辞
権利

○
○
○

○
○
○

×
×
×

○
○
○

acknowledgment
dedicationrightscommon.css
common.css
common.css

関係
章
節
項

○
○
×

○
○
○

○
×
×

○
○
○

目
後書き
巻末

xnotes.xhtml

×
○
○

○
○
○

×
○
○

○
○
○

chapter
sectionsubsection
subsubsection
postface
xnotescommon.css
common.css
common.css
common.css
common.css
common.css

注釈
付録
図表

loft.xhtml

○
○

○
○

×
○

○
○

appendix
loft

common.css
common.css

一覧
参考文

ユーザー作成は

○

○

○

○

references

common.css

献表

任意。

○
○

○
○

×
×

○
○

publ-index
copyright

common.css
copyright.css

目次
前書き
ユーザ

mltoc.xhtml

ー作成

自動作成は
索引
奥付

references.xhtml
publ-index.xhtml
copyright.xhtml

24

参考資料

EPUB 用のテーマのファイル構成
EPUB 用の各テーマは次のファイルから構成しています。
表 1 テーマの構成
役割

デフォルト・ファイル名

CAS-UB 全出版物共通のスタイルシート

cas-common.css, cas-

記事の種類を通してのデフォルトのスタイルシ

common_epub.css
common.css

ート
記事の種類に固有のスタイルシート「記事の種類」の表を参照

自動生成カバー画像のレイアウト・カスタマイズ
カバー画像が指定されていないとき、タイトルページ（opening.html）からカバー
画像を自動生成します。 EPUB は一般に別途デザインした表紙画像を使いますので、CAS-UB で自動生成する表紙画像は正式画像の代わりの一時的な仮画像の位置づけです。
フォールバックのカバー画像の自動生成はサーバ上で、AH CSS Formatter（ Webページ参照）を使って行なっています。この機能を利用して、自動生成画像のレイアウトを自分で変更もできます。
タイトルページから作るカバー画像のレイアウトを指定するには、style.css に表
紙画像専用の CSS を次のように記述します。

1. タイトルページ専用のレイアウト指定には"opening"を使います。
2. 出力媒体を print media に指定します。
3. カバー画像の大きさは 1092×1612 です。
4. CSS のプロパティには、AH CSS Formatter で使える独自拡張機能も指定できます。
レイアウトを設計するときは、AH Formatter を使って opening.html を組版しながら行なうと便利です。AH CSS Formatter で表示レイアウトをプレビューするとき
は用紙サイズを 28.89cm×42.65cm に指定してください。

25

図 表 一 覧
図一覧
第 1 章 テーマとユーザー作成スタイルシートの関係
図 1 EPUB3 のテーマを選択（p. 1）
図 2 横書のテーマと縦書のテーマ（p. 2）
図 3 テーマのリンク（p. 2）
図 4 調整用スタイルシートとユーザー・スタイルシート（p. 3）
図 5 ユーザー・スタイルシートのアップロード（p. 4）

第 2 章 CAS-UB による記事 XHTML
図 1 記事の中を見出しランクで階層化（p. 7）
図 2 記事一覧による記事の階層表示（p. 8）
図 3 レベルの設定（p. 9）

第 3 章 カスタマイズの例
図 1 記事一覧の構成例（p. 16）

表一覧
第 2 章 CAS-UB による記事 XHTML
表 1 記事の種類（p. 6）
表 2 CAS 記法のブロック要素（p. 9）
表 3 CAS 記法のインライン要素（p. 11）

第 3 章 カスタマイズの例
表 1 本文記事のクラス属性（p. 15）
表 2 level* とタイトル・見出しの関係（p. 19）

第 4 章 旧版仕様など
表 1 記事の種類（EPUB3）（p. 23）

参考資料
表 1 テーマの構成（p. 25）

27

CAS-UB サポート
アンテナハウス株式会社が提供する「クラウド型汎用書籍編集・制作サービス」（CAS-UB）のサポート
情報を提供します。

CSS レイアウトのカスタマイズガイド V5
2018 年 4 月 3 日発行 V5.0 初版
著
者
発 行 者
発 行 所
住
所
電話番号
Ｗ Ｅ Ｂ
Ｅメール

CAS-UB サポート小林 徳滋
アンテナハウス株式会社
東京都中央区東日本橋 2 丁目 1 番 6 号 東日本橋藤和ビル 5 階
03-5829-9021
http://www.antenna.co.jp/
info@antenna.co.jp

アンテナハウス株式会社
Copyright (C) 2011-2018 Antenna House, Inc. All rights reserved.