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月、2016年7月、11月、2017年9月に増刷(現在「6刷」)。前書(2011年版)と合算すると38,000部のロングセラーとなっています。

改訂版に関する情報

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

  • 対応バージョンは、CS5/CS5.1/CS6/CC/CC 2014
  • 178ページから78ページ増量の256ページ
  • 改訂版にありがちな「焼き直し」は69ページのみ
  • 金額は180円(だけ)アップの2,380円(税別)

書籍リリース後の追加情報は、サポートページにて公開しています。

最新版への対応

Illustrator CC 2017(2016年11月リリース)への対応版準備中です。全ページ書き換えますので、2017年版を待たずに、2014年版を(も)ご購入ください。

お知らせメールへの登録はこちら

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

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

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

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

『10倍ラクするIllustrator仕事術』(増強改訂版)は、2011年発売の『10倍ラクするIllustrator仕事術』の改訂版。

2014年に技術評論社から発売、現在6刷。2011年版と合わせて38,000部のロングセラーとなっています。

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

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

Illustrator CC 2017(2016年11月リリース)への対応版準備中です。全ページ書き換えますので、2017年版を待たずに、2014年版を(も)ご購入ください。

お知らせメールへの登録はこちら

セミナー開催情報

セミナー開催情報をこちらにまとめています。

DTP Transitと無関係のものも掲載しています。お問い合わせは、それぞれのイベントの主催者までお願いします。

5つの「く」

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

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

オススメ外部リンク

Adobe Creative Stationで「知ってるようで、知らずに損してるAcrobatとPDFのアレコレ」と題して連載しています。

Adobe Creative Stationで「ベテランほど知らずに損してるIllustratorの新常識」と題して連載しました。

Adobe Creative Stationで「ベテランほど知らずに損してるPhotoshopの新常識」と題して連載しました。

オススメのスライド

お問い合わせ

リンク

このページの上部に戻る