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

この記事は鷹野雅弘によって執筆されました。
公開日:2010年11月24日、更新日:2016年6月20日

同じスタイルシートですが、DTPのスタイル機能とWeb/ePubのCSSは、かなり異なります。Webでは「HTML+CSS(XHTML+CSS)」と記述するように、CSSだけでなく、その前提となるHTML(XHTML)をどう記述するかが肝心です。

DTPのスタイル機能

  • 見出し、本文、キャプションにかかわらず、すべての段落は、同じ段落です。
  • これに段落スタイルを作成/適用することで、見かけ上、見出しらしく、本文らしく、キャプションらしく見えます。
  • それぞれの段落には、段落スタイルを適用する必要があります。
  • 文字レベルで書式を設定するには、文字スタイルを作成/適用します。文字スタイルは、段落スタイルよりも優先されます。

dmd_web-dtp.gif

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ルール

参考

『10倍ラクするIllustrator仕事術』(増強改訂版[CS5/CS6/CC/CC 2014対応])

2014年10月に発売。新しいバージョンを使いながらも、古いやり方のまま作業されている中級以上のユーザー向けの書籍。ツールやコマンドなどの基本的な使い方の解説はありません。

2015年3月、8月に増刷。前書(2011年版)と合算すると3万部超のロングセラーとなっています。

改訂版に関する情報

2011年に発売した書籍の改訂版です。

  • 対応バージョンは、CS5/CS5.1/CS6/CC/CC 2014
  • 178ページから78ページ増量の256ページ
  • 金額は180円(だけ)アップの2,380円(税別)

最新版への対応

2016年11月リリースのIllustrator CC 2017への対応版を、2017年2月に発売します。なお、書籍リリース後の追加情報は、サポートページにて公開しています。

全都道府県縦断セミナーツアー

2014年10月に技術評論社から発売された『10倍ラクするIllustrator仕事術』(増強改訂版)のプロモーションのために、全国47都道県にて実施。

47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』(増強改訂版)は、2011年発売の『10倍ラクするIllustrator仕事術』の改訂版。2014年に技術評論社から発売、現在5刷です。2011年版と合わせて35,000部のロングセラーとなっています。

詳しくはサポートサイトにて。

画像:『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』全都道府県縦断セミナーツアー、 47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

画像:『10倍ラクするIllustrator仕事術』改訂版

5つの「く」

画像:『10倍ラクするIllustrator仕事術』改訂版

DTP Transitのコアとなっている制作へ考え方「ムラなく、モレなく、直しに強く、手数を少なく、美しく」を5つの「く」としてまとめてみました。

オススメのスライド

お問い合わせ

メールマガジン

サイトの新着情報などを、月1回程度、メールマガジンでも配信しています(まぐまぐから配信。無料です)

オススメ記事

Illustrator

InDesign

Photoshop

その他

 

リンク

このページの上部に戻る