前へ 次へ

9–1 属性指定の詳細

CAS記法を属性マークアップの側面から整理します。

クラス属性

任意の要素に属性クラス属性をつけられます。クラス属性の値は、要素の分類や見え方の指定をするキーワードとして使います。

例

(1) CAS記法

:center この段落にはclass="center"という属性が付きます。テーマにスタイル指定がありますので中央揃えになります。

(2) 表示例

この段落にはclass="center"という属性が付きます。テーマにスタイル指定がありますので中央揃えになります。

(3) HTML

<p class="center">この段落にはclass=&quot;center&quot;という属性が付きます。テーマにスタイル指定がありますので中央揃えになります。</p>

テーマで使えるクラス属性値

CAS-UBのテーマでクラス属性値にレイアウトを設定しています。このクラス属性値を属性組み込みクラス属性値と言います。組み込みクラス属性の種類については 9–2 組み込みクラス属性値一覧 を参照してください。

クラス属性によるレイアウトカスタマイズ

EPUBを生成するときは、自分で自由にクラス属性値を決め、スタイルシートを作成してそのクラス属性値を使ってレイアウト指定の追加ができます。

PDFでは、':styleset1'～':styleset20'というクラス属性値を使ってPDFレイアウトをカスタマイズできます（スタイルセット機能：「CAS-UBによるPDF生成のためのガイド」（CAS-UB サポート＆ガイドより配布を参照）。

ID属性

属性ID属性は、HTMLで任意の位置に目印を付けるものです。':id=value'形式で指定します。'value'には記事内で固有の値を指定します。

例２

(1) CAS記法

ここで[[[:img:id=math_i1 {{math_i1.png}}]]]はXXXを表わす。

(2) 表示例

ここでimages/math_i1.pngはXXXを表わす。

(3) HTML

ここで<span id="math_i1" class="img"><img alt="images/math_i1.png" src="images/math_i1.png"></img></span>はXXXを表わす。

ID属性の利用

本項のID属性はHTML文法上は有効ですが、CAS-UBのID参照（8–35 記事内の特定位置を参照する（ID参照））機能の処理対象ではありません。

一般の属性

一般の属性は属性名と属性値の両方を指定します。

注　意

CAS記法を使えば、一般の属性を自由にマークアップできます。しかし、EPUBの仕様で許されていない一般属性を定義するとEPUBチェックでエラーになります。また、PDF生成では無視されます。

例３

(1) CAS記法

例として、言語指定をしてみます。

//:xml~:lang=en Hellow, world//

(2) 表示例

Hellow, world

(3) HTML

<em xml:lang="en">Hellow, world</em>

例４

(1) CAS記法

段落にスタイル属性で境界線を付けてみます。これはEPUBでのみ有効です。

:style=border~:solid~ thin~ red この段落には赤の細実線で境界線が付いています。

(2) 表示例

この段落には赤の細実線で境界線が付いています。

(3) HTML

<p style="border:solid thin red">この段落には赤の細実線で境界線が付いています。</p>

コロン':'、空白' 'は、CAS記法のマークアップでは属性の開始、区切りの役割をもちます。上の例ではCAS記法での役割をキャンセルするためにエスケープしています。

一般の属性の利用

図などのサイズ指定には属性名と属性値の設定を使います。図のサイズ指定については次の関連項目を参照してください。

親要素に属性を付与

箇条書きや表のように要素が親子関係になっているとき親要素に属性を付けたいことがあります。

たとえば、番号なし箇条書きは、CAS記法では次のようにマークアップします。

*第一項目
*第二項目
*第三項目

これはHTMLでは次のようにul要素-li要素という2階層になります。

<ul>
<li>第一項目</li>
<li>第二項目</li>
<li>第三項目</li>
</ul>

このようなとき子供要素のマークアップ直後に'::'で属性を設定すると、その属性は親の要素に付きます。

例５

(1) マークアップ例

箇条書きのラベルを任意の記号に変更する例

*::nolabel ♠ 第一項目
*♣ 第二項目
*♥ 第三項目

(2) 表示例

  • ♠ 第一項目
  • ♣ 第二項目
  • ♥ 第三項目

(3) HTML

<ul class="nolabel">
<li>♠ 第一項目</li>
<li>♣ 第二項目</li>
<li>♥ 第三項目</li>
</ul>


前へ 次へ