EPUBで箇条書きのラベルを消すためのCAS記法例(親の要素に属性を付ける方法)


箇条書きには、番号なし箇条書きと番号付き箇条書きがあります。CAS-UBではそれぞれ図1のようにマークアップをします。

20141011a
図1 箇条書き CAS記法

番号なし箇条書きのマークアップは、次のようなHTMLに変換されます。


<ul>
<li>1項目目</li>
<li>2項目目</li>
<li>3項目目</li>
</ul>

CAS-UBで用意している「CSSテーマ」で番号なし箇条書き、番号付き箇条書きのレイアウトを指定しています。そこで、例えば「グリーン2」を選択してプレビューしますと、図2のように表示されます。

20141011b
図2 箇条書きを、(テーマ)「グリーン2」で内容表示(プレビュー)する

さて、この箇条書きのラベルを消したいとき、一番、手っ取り早いのは要素にlist-style:noneというスタイルを指定する方法です。

CAS記法では要素のマークアップの直後に’:’を置くと、その要素に属性が付きます。そこで箇条書きの先頭’*’または’#’に次の図3のようにマークアップしてみましょう。

20141011c
図3 箇条書きの項目にスタイル属性を指定

この内容表示(プレビュー)すると図4のようになり、最初の項目しかラベルが消えていません。

20141011d
図4 箇条書きの項目へのスタイル指定の内容表示

すべてのラベルを消すために、各’*’(li)要素へのスタイル指定を繰り返しても良いのですが面倒です。
通常は上位のulまたはol要素にスタイル指定してラベルを消すと楽ちんです。

このようなときのCAS記法は図5のように要素の直後に’::’をおいて属性を指定します。そうしますと1つ上の階層の要素に属性が付きます。

20141011e
図5 親の要素に属性をつけるマークアップ

このCAS記法の’::’に続く属性はHTMLでは次のように上位のul要素の属性になります。


<ul style="list-style:none">
<li>1項目目</li>
<li>2項目目</li>
<li>3項目目</li>
</ul>

内容表示(プレビュー)しますと、図6のようにすべての箇条項目のラベルが消えています。

20141011f
図6 親の要素に属性をつけて箇条項目のラベルを消す

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA値として計算に合う値を入力してください。 *