こんにちは、『AH Formatter』のサポート担当です。
今回はCSSのお話です。
CSS3ではページの概念が追加され、html+cssでもPDF化や印刷時に見栄えのいい結果が得られるようになりました。
『AH Formatter』でCSSを組版されるお客様も徐々に増えてきました。

CSSはパッと見、とても簡単そうです。
書き方はこんな感じです。

セレクタ｛
　プロパティ：値；
　プロパティ：値；
｝

セレクタでスタイル付けしたい対象を指定します。
対象を決めて、どんなスタイルにしたいかをプロパティ名と値のセットで指定します。基本はこれだけ。
例えば、

p {
　font-size:10pt;
　color:red;
　}

のようにするだけです。
セレクタというのは、このようにタグを直接指定して使う要素型セレクタもありますが、
他にも様々な種類があります。
classセレクタ、idセレクタ、擬似要素セレクタ、属性セレクタなどです。
一般的にはclassを使うことが多いですが、複合して使うこともできます。
仕組みとしてはとても単純ですが、管理していくことが非常に難しい。
そして、何か問題があったときに原因箇所を探るのがこれまたもっと難しい。
何故かと言えば、

・スタイルの定義を複合的に指定できること
・同じセレクタで何度でも多重に定義できること
・スタイルには子要素まで継承されるものがあること
・スタイルには優先順位があること

などが理由です。

例えば、

<p id=”abc” class=”aaa bbb ccc”>Antenna House</p>

/* CSS */
/* 要素型セレクタ */
p {
color:red;
}

/* idセレクタ（p要素のみ） */
p#abc {
color:blue;
}

/* idセレクタ（要素特定なし） */
#abc {
color:green;
}

/* classセレクタ（p要素のみ） */
p.aaa {
color:yellow;
}

/* classセレクタ（要素特定なし） */
.bbb {
color:pink;
}

/* 全称セレクタ */
* {
color:black;
}

/* classセレクタ */
.bbb {
color:white;
}

こーんな感じでCSSは定義できます。
さて、ここで問題です。この場合何色で表示されるでしょう～か？

正解は、青（blue）です。
上記の場合、要素を特定したidセレクタが優先されます。
この優先度のルールを把握するだけでも大変です。
（さらに最優先される “!important” なんて厄介な奴がおります。）

このCSSで
“bbb”のクラスが2回定義されていること、気がつきましたか？
そう、”同じセレクタで何度でも”です。いいんです、CSSでは。
前の定義を残しつつ、ちょっと追加してレイアウト変更しよう、なんてことも可能ですが、
こうしてるうちにCSSはどんどん膨大なものになっていきます。

それから、この例ではid名やclass名に”abc”や”aaa”なんて適当に書いてますが、
名前付けルールも「自由」です。
なんでもいいんです。これってとても怖いことです。
こんな風に適当に付けてたらそのうち破綻するの、目に見えてますよね。
名前にしろ、多重定義にしろ、自由すぎるにも程があります。

だから、ちゃんとルールを決めてやりましょう、っていう方法論が
たくさん考えられています。
裏を返せば、それだけ皆さん破綻しないために苦労されているってことですね。

複雑化したCSSはトラブルの元、です。
開発もメンテナンスも（そしてサポートも）XSL-FOの数倍の時間を必要とします。
『AH Formatter』では、CSSの組版はシンプルな構造、シンプルなレイアウトをお勧めします。
マニュアルなどの複雑なレイアウトにはXSL-FOでの組版が向いています。

続きのお話はこちらです：CSS を組版に使うときに注意すべきこと（入門編その２）

Tweet