DTPのスタイル機能と、Web/ePubのCSSの違い（1）

Web/ePubのCSS

• それぞれの段落には、h1（大見出し）、h2（中見出し）、p（単なる段落）のようにタグ付けされています。サイズや金額を示す洋服のタグと同じようなものです。タグが付けられた段落は、h1要素、h2要素、p要素のように呼ばれます。なお、これらを「ブロックレベル要素」と呼ぶます。
• body { ... }というCSSルールを作成すると、ページ内のすべての要素の基本になります。このCSSルールは、文書に適用する必要がありません。
• h1 { ... }というCSSルールを作成すると、ページ内のすべてのh1要素に自動で適用されます。このCSSルールは、文書に適用する必要がありません。h2 { ... }やp { ... }も同様です。
• 特定の段落のみに、異なるCSSルールを適用するには「.lead { ... }」のように、クラスセレクタからはじまるCSSルールを作成し、それを適用するために、HTML文書の要素内に「class="lead"」を記述します。p要素に適用したい場合には、<p>...</p>を<p class="lead">...</p>のように変更します。
• 文字スタイルにあたるのがspan要素で、<span class="caption">...</span>のように記述します。ブロックレベル要素に対して、インライン要素と呼ばれます。
• インライン要素には、汎用的な（=特に意味を持たない）span要素のほか、強調を表すstrong要素、em要素があります。

Webの人から見たDTPのスタイル

• DTPのスタイルは、Webでいうクラスセレクタを使ったCSSルールの適用といえます。CSSで「.段落スタイル名 { ... }」を作成し、XHTMLに<p class="段落スタイル名">...</p>のように記述します。
• 複数のスタイルを同時に適用することはできません。

CSSの「C」

• CSSはCascading Style Sheetの略。これは、段落レベルだけでなく、複数の段落スタイルにまとめて、ページ単位で、のように、異なるレベルからスタイルを適用できることを示しています。
• 要素セレクタ、子孫セレクタをうまく使うことで、XHTMLに手を加えずに、スタイルを適用することができます。

ポイントになる語句：

構造化、ブロックレベル要素、インライン要素、クラスセレクタ、CSSルール

参考

• DTPのスタイル機能と、Web/ePubのCSSの違い（2） - DTP Transit