DTPのスタイル機能と、Web/ePubのCSSの違い(1)
同じスタイルシートですが、DTPのスタイル機能とWeb/ePubのCSSは、かなり異なります。Webでは「HTML+CSS(XHTML+CSS)」と記述するように、CSSだけでなく、その前提となるHTML(XHTML)をどう記述するかが肝心です。
DTPのスタイル機能
- 見出し、本文、キャプションにかかわらず、すべての段落は、同じ段落です。
- これに段落スタイルを作成/適用することで、見かけ上、見出しらしく、本文らしく、キャプションらしく見えます。
- それぞれの段落には、段落スタイルを適用する必要があります。
- 文字レベルで書式を設定するには、文字スタイルを作成/適用します。文字スタイルは、段落スタイルよりも優先されます。
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ルール