DTP Transitでタグ「CSS」が付けられているもの

以前、こちらにエントリーでご紹介したユーティリティ(プラグイン)Specctrが2.0にバージョンアップされました。現在は、Fireworks、Illustratorに加えて、Photoshop、InDesignにも対応しています。

バージョンアップのポイントは次の4点。

  • Respoinsive %, em:レスポンシブWebデザイン対応(%やemをサポート)
  • Coodinates x, y, :オブジェクトの座標の記述
  • Scale option x2:2倍に拡大するオプション
  • CSS export:CSS書き出し

登録ユーザーは、Transaction番号を入れることで75%オフになるとのことですが、現状、フォームはきちんと動いていないようです。

ひとことで言えば「カオス」です...

右が切れてしまうので、こちらをご覧ください。

[ファイル]メニューパネルスクリプト
Web用に保存書き出し別名で保存CSSプロパティLayer ExportersaveSVG_GUI.jsx
デフォルトインストールが必要)
設定が必要)
キーボード
ショートカット
command+option+shift+S-command+shift+S---
ビットマップGIF
JPEG
PNG
SVG
(CS5までは
CSS3
書き出し単位オブジェクトスライスすればレイヤー名を付けた
オブジェクトのみ
選択したオブジェクトレイヤーに分ければ
アートボード
アートボード別、
レイヤー別に
書き出すときの
ファイル名
ダイアログボックスで指定
(スライスごとの設定を
優先)
指定したファイル名_アートボード名.拡張子-レイヤー名.拡張子アートボード名.svg
  • [Web用に保存]は、Illustrator CS5までは[Webおよびデバイス用に保存]
  • SVGの書き出しはIllustrator CS5までは[Webおよびデバイス用に保存]内にあったが、Illustrator CS6では[別名で保存]のみに。[Web用に保存]に復活するのが望ましいと思います。

欧米(シングルバイト圏)のWebサイトでは、ページ内の多くの部分でWebフォントを用いることが半ば常識化しています。しかし、日本語(マルチバイト)においてはいくつかの問題があり、まだまだ、閲覧者のローカルにインストールされているフォントに頼らざるを得ません。

そこで、日本語を表現するCSSのfont-familyのあり方を、現在のWebブラウザやOSの標準フォントの現状を踏まえて再考しました。セットの一覧はこちらにも掲載してありますが、本ページでは、その調査結果や設定の背景も紹介します。

昨年(2013年)、Winodws 8.1、OS X Mavericks(10.9)のそれぞれに標準搭載された字游工房社の游ゴシック体と游明朝体も、利用をする内容となっています。WebやEPUBにかかわる方はもちろん、そうではない方も、両OSに共通する和文書体が標準搭載された現在のフォント環境の把握や整理にご参考ください。

游ゴシック 游明朝

InDesignからWeb/EPUB、Web/EPUBからInDesignのように相互にデータを取り回す機会が今後、確実に増えてくると思われます。

このとき、問題になるのがCSSとInDesignの互換性のなさ です。過去のドキュメントの互換性を犠牲にしても、InDesignがCSSの仕様に歩みよって進化することを夢想します。

CSSInDesignのワークアラウンド重要度
プロパティ名機能
font-weight「bold」などの値を与えることで、ウエイトの太いフォントを設定できるウエイトの太いフォントを設定する
(Illustrator同様、太字機能という概念はない)
★★
background-color背景色段落境界線、下線を擬似的に使って対応
段落境界線は、段落内改行の際に対応できないケースが多い
★★★★★
background-image背景画像不可能★★★★★
background-repeat背景画像の繰り返し不可能★★★
padding内側のアキ(内マージン)左インデント、右インデント
段落前のアキ、段落後のアキ
[テキストフレーム設定]の[フレーム内マージン]みたいな感じ
★★★★
border段落ボックスの四辺に罫線を引くことができる
四辺を個別に設定可能
上下は「段落境界線」で対応★★★★★
marginpadding、および、borderの外のアキ左インデント、右インデント
段落前のアキ、段落後のアキ
★★★★
border-radius角丸
(四隅を個別に設定可能)
段落境界線で「点」などを選択し、[間隔のカラー]でスキマを埋めて対応
ただし、左右は半円になってしまう
★★★★★
list-type-image箇条書きの記号に画像を設定できる文字スタイルにそれっぽいフォントを設定して対応

2014年2月6日(木)サンシャインシティコンベンションセンターで開催されるpage2014のメディアクリエイションゾーンセミナーにて、『Jimdo VS Muse、サイト制作に使うならどっち?』というセッションが予定されています。

「個人での情報発信」、「会社での情報発信」、そして、「クライアントから“サイト制作もお願い”と言われたときに対応できるか」など、いくつかのレイヤーがありますが、今回は、JimdoとMuseを取り上げ、その思想やインターフェイス、ワークフローから、使えるものかを検証します。

page2014-Jimdo-Muse.png

プリントメディアに従事される方にとって、Web制作におけるHTML、CSS、JavaScriptのコーディング作業は骨の折れる作業ですが、Jimdo(ジンドゥー)やAdobe Museをはじめとする、コーディング不要でサイトを制作できるツールが注目されています。

Jimdo

  • クリック、タイピングのみでサイト構築
  • スマホ対応
  • オンラインショップ機能あり
  • SNS対応
  • スライドショー(フォトギャラリー)機能
  • 無料プランあり

Adobe Muse

  • InDesignライクな操作感
  • Illustrator、Photoshopとの親和性が高い
  • スクロール効果、スライドショー、コンタクトフォーム、ビデオなどのインタラクティブ機能
  • 単体サブスクリプション、または、Creative Cloud通常版の一部

Illustrator CCのCSS書き出しオプションについてまとめてみました。

AiCC-CSS-Export-option-s.jpg

カテゴリーオプションサンプルコード
オブジェクトのアピアランス塗りを含める background : #8CC63F;
background : rgba(140, 198, 63, 1);
線を含めるborder-style : Dashed;
border-color : #000000;
border-color : rgba(0, 0, 0, 1);
border-width : 2px;
不透明度を含めるopacity : 0.5;
位置とサイズ絶対位置を含めるposition : absolute ;
left : 355px;
top : 190px;
サイズを含めるwidth : 81px;
height : 43px;
オプション名称未設定オブジェクト用にCSSを生成
ベンダープレフィックスを含めるWebkit-webkit-border-radius : 12px;
Firefox-moz-border-radius : 12px;
Internet Explorer
Opera
サポートされていないアートをラスタライズ
(ダイアログボックス内のオプションなし)角丸border-radius : 12px;
グラデーションbackground : linear-gradient(180deg, rgba(204, 224, 244, 1) 0%, rgba(195, 220, 242, 1) 6.41%, rgba(169, 210, 238, 1) 17.06%, rgba(128, 194, 231, 1) 30.66%, rgba(71, 172, 222, 1) 46.49%, rgba(30, 156, 215, 1) 56.74%, rgba(0, 117, 190, 1) 86.52%, rgba(0, 91, 151, 1) 99.44%);

2013年7月18日(木)、ベルサール神保町3Fで第148回 バンフーセミナーが開催され、130名ほどの方が参加されました。

IMG_1174.jpg

参照リンク(ツールなど)

ダウンロードデータ

データをご希望の方は、お手数ですが、こちらのフォームにお答えください。

PAGE 2011でのセミナー終了後に、リクエストいただいたので、ePub編集を行う上で最低限覚えておきたいタグなどをリストアップしてみました。

最低限覚えておきたいHTMLのタグ

ブロックレベル要素は「段落スタイル」、インライン要素は「文字スタイル」にあたります。

ePubで使えるHTMLのタグはこちらに定義されています。

種類カテゴリタグ読み方意味由来
ブロックレベル骨組みhtmlエイチティーエムエル-
head ヘッド-
bodyボディ-
テキストh1〜h6エイチ見出しheading
pピー段落paragraph
divディブ任意の範囲、グループ化division
リストulユーエル

番号なしテキスト
(箇条書き)

unordered list
olオーエル番号付きテキストordered list
liリストの項目list item
その他tableテーブル-
インライン強調emエム強調 emphasis
strongストロングより強調-
その他aエー(アンカー)リンク箇所anchor
brビーアール改行(段落内)line break
imgイメージ画像image
spanスパン汎用的に使用-

DTPのスタイル機能とWeb/ePubのCSSの違いのひとつに、記述する場所があります。

DTPのスタイル機能

  • ドキュメント内に書き込みます。InDesignでは[段落スタイル]パネル内で記述されていて、一覧表示するような機能はありません。
  • 複数ドキュメントは、ブック機能を使って、それぞれのドキュメントの段落スタイルを同期する機能があります。あくまでも同じものに書き換えるという機能で、それぞれのドキュメント内に記述されていることには変わりありません。
  • ブック機能+スタイルの同期は、慎重に行わないと、大事故につながります。

Web/ePubのCSS

  • 基本的に、外部スタイルシート書類内に書き込み、それぞれのHTML(XHTML)からはリンクして参照します。
  • HTML(XHTML)が何百ページあっても、CSSファイル内の記述を変更すれば、それが即座に変更されます。

HTMLCSS.gif

  • CSSは1ファイルでなく、複数ファイルに分け、それらを同時にHTML(XHTML)から参照できます。
  • また、CSSファイルから、別のCSSファイルを読み込むことができます。
  • 読み込み順や優先順位などの扱いがあるので、慎重に組み立てる必要があります。

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

DTPのスタイル機能

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

dmd_web-dtp.gif

DTP Booster 020(Osaka/101002)

電子書籍の汎用フォーマットであるEPUBのオーサリングを行う際、HTMLやCSSのスキルが必要になってきます。QuarkXPressや InDesignのスタイルシートと似て非なるCSS、そして、それ以前に知っておくべきHTMLのマークアップについて、短時間で、必要最小限の知識をご紹介します。

DTP Booster 020(Osaka/101002)終了直後、同会場にて「CSS Niteビギナーズ:Dreamweaver編」が開催されます。DTP制作者にはハードルが高いHTMLやCSSの手打ち作業。これを効率的に行うDreamweaverの基本について学べます(同時にお申し込みされると割引があります)。

  • イベント名:「CSS Nite ビギナーズ:Dreamweaver編(大阪) 」
  • 日時:2010年10月2日(土)16:40-20:40(開場16:15)
  • 会場:大阪産業創造館(大阪市中央区本町)
  • 参加費:4,000円(事前決済) 
  • 詳細:http://cssnite.jp/beginners/dreamweaver/osaka/

おそらくePubがここまでホットになるとは、CS3/CS4とAdobe Digital Editions書き出し(=ePub書き出し)をサポートしてきたInDesignとしては、気の毒ですが"脇が甘かった"としか言いようのない状況です。

InDesignからのePub書き出しに関するWish Listをまとめてみました。逆をいうと、ePub書き出しを行うときの問題点として、ご注意いただければ幸いです。

機能面などでの要望

  • 元のファイル名「日本語.indd」のとき「abc.epub」と指定しても、XHTMLファイル名が「繧ケ繧ソ繧、繝ォ蜷阪」のように化けてしまう(ePubを解凍するまでわからない) → アラートを出すべき
  • 段落スタイル名に、全角文字が入っていたりすると、クラス名に大幅に手が入る。複数のスタイルが同じスタイルとして扱われてしまうといったヤバイ事態が生じる → 詳細
  • html要素に「xml:lang="ja"」が入るようにして欲しい。また、日本語が入っていてもp要素に「xml:lang="en-us"」が入らないようにして欲しい(Adobe Digital Editionsで文字化けする)
  • InDesign CS4にはあった[画像をコピー](デフォルトは「最適化」なのでこれを「オリジナル」に変更)のオプションを復活して欲しい
  • 「content.opf」ファイル内の「<dc:language>en</dc:language>」は「<dc:language>ja</dc:language>」であるべき

InDesignCS4-epub-export.jpg

ローカリゼーション

  • ダイアログボックスボックス名は、[Digital Editions書き出し]でなく、[ePub書き出し]にすべきでは?
  • 「第1レベルのエントリを改章として使用」→「第1レベルの目次を改ページとして使用」(せめてエントリ→エントリー)
  • 「既存のCSSファイルを使用」→「既存のCSSファイルをコピーする」(中身がコピーされて、新規ファイルが作られるため)
  • [フォーマット]→[最適化]または[変換]

DTP Booster 020(Osaka/101002)

2010年6月のDTP Booster 014の終了後、EPUBの編集を行うにあたりCSSやHTMLの最低限の知識が必要だよね、とうことで、都内で開催したDTP Booster 016は、再演(017)、再々演(018)を行いました。これの大阪版を10月2日に開催します。

  • イベント名:DTP Booster 020(Osaka/101002)
  • 日時:10月2日(土)13:50-16:10
  • 会場:大阪産業創造館(サンソウカン)(大阪市中央区本町)
  • 参加費:2,500円(事前決済)

電子書籍の汎用フォーマットであるEPUBのオーサリングを行う際、HTMLやCSSのスキルが必要になってきます。QuarkXPressや InDesignのスタイルシートと似て非なるCSS、そして、それ以前に知っておくべきHTMLのマークアップについて、短時間で、必要最小限の知識をご紹介します。

次の内容を予定しています。

  • HTMLの基礎
  • CSSの基礎
  • ePub編集のワークフロー

なお、DTP Booster 020(Osaka/101002)終了直後、同会場にて「CSS Niteビギナーズ:Dreamweaver編」が開催されます。DTP制作者にはハードルが高いHTMLやCSSの手打ち作業。これを効率的に行うDreamweaverの基本について学べます(同時にお申し込みされると割引があります)。

2010年7月20日に開催したDTP Booster 016は、80席が即日満席となり、2回の再演を行いました。DTP Booster 016-018では「EPUBの編集を行うにあたりCSSやHTMLの最低限の知識を得ていただくこと」をゴールとしましたが、「ePubにフォーカスしたハンズオン(操作研修)を」という声をたくさんいただき、ハンズオンセミナーを企画しました。

2本とも同一内容。それぞれ11名限定です。

DTP Booster 021(Tokyo/100826)

  • 日時:2010年8月26日(木)19:00-21:00
  • 会場 :JaGraプロフェッショナルDTP&Webスクール(中央区日本橋小伝馬町)
  • 詳細・お申し込み※満席

DTP Booster 022(Tokyo/100901)

  • 日時:2010年9月1日(水)19:00-21:00
  • 会場 :JaGraプロフェッショナルDTP&Webスクール(中央区日本橋小伝馬町)
  • 詳細・お申し込み

HI370039.png

今回のDTP Boosterでは、JaGraプロフェッショナルDTP&Webスクール(社団法人日本グラフィックサービス工業会運営)にご協力いただいています。

  • iMac(今回のセミナーはMac OS Xのみを対象とします)
  • Adobe CS5
  • 講師の操作画面を確認できるサイドモニタを2名に1台設置

DTP Booster 018(Tokyo/100806)

2010年8月6日、クリーク・アンド・リバー社 セミナールーム(千代田区麹町)にてDTP Booster 018(Tokyo/100806)を開催し、94名の方にご参加いただきました。

6月19日に開催したDTP Booster 014(電子出版特集)の終了後にいただいたリクエストにより、EPUBの編集を行うにあたりCSSやHTMLの最低限の知識を得ていただくためのショートセミナーとして開催しました。好評のため、再々演となりました。

P1120140.jpg

次のブログで取り上げていただきました。ありがとうございます。

DTP Booster 017(Tokyo/100727)

2010年7月27日、クリーク・アンド・リバー社 セミナールーム(千代田区麹町)にてDTP Booster 017(Tokyo/100727)を開催し、76名の方にご参加いただきました。

6月19日に開催したDTP Booster 014(電子出版特集)の終了後にいただいたリクエストにより、EPUBの編集を行うにあたりCSSやHTMLの最低限の知識を得ていただくためのショートセミナーとして開催しました。

次のブログで取り上げていただきました。ありがとうございます。

なお、同内容を8月6日(DTP Booster 018)に再演します。まだ少しだけ空きがありますのでキャンセル待ちになっていますがご興味ある方はお早めにお申し込みください(結局、同じ内容を3回やりましたが、4回目はありませんので、お見逃しなく)。

DTP Booster 016(Tokyo/100720)

2010年7月20日、クリーク・アンド・リバー社 セミナールーム(千代田区麹町)にてDTP Booster 016(Tokyo/100720)を開催し、72名の方にご参加いただきました。

6月19日に開催したDTP Booster 014(電子出版特集)の終了後にいただいたリクエストにより、EPUBの編集を行うにあたりCSSやHTMLの最低限の知識を得ていただくためのショートセミナーとして開催しました。

次のブログで取り上げていただきました。ありがとうございます。

なお、同内容を7月27日(DTP Booster 017)8月6日(DTP Booster 018)に再演します。7月27日の回はキャンセル待ちになっていますが、8月6日の回は、まだ少しだけ空きがありますので、ご興味ある方はお早めにお申し込みください。

DTP Booster 018(Tokyo/100806)

DTP Booster 016/ DTP Booster 017が早々に満席になり、キャンセル待ちを受け付けいますが、それも40名以上になっているため、DTP Booster 018として再々演を行うことになりました。

  • 日時:8月6日(金)19:00-21:00
  • 会場:クリーク・アンド・リバー社 セミナールーム(千代田区麹町)
  • 参加費:2000円(当日払い)
  • 主催:DTP Booster実行委員会
  • 共催:クリーク・アンド・リバー社
  • 協力:CREATIVE VILLAGE

ご興味のある方はお早めにどうぞ。

DTP Booster 016(Tokyo/100720)

7月20日、7月27日に、クリーク・アンド・リバー社 セミナールーム(麹町)にて、 DTP Booster 016/ DTP Booster 017を開催します。

6月19日に開催したDTP Booster 014(Tokyo/100619)電子出版特集の終了後、EPUB編集のために最低限のCSSとかの知識が必要だよね、ということで企画したものですが、すでに2回分ともキャンセル待ちになってしまいました。

ご希望が多ければ、もう1回日程を検討しますので、キャンセル待ちへのご登録をお願いいたします。

Twitter

本サイトの記事以外に、小ネタなどをツイートしています。また、マンスリーでまとめています。

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

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

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

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

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

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

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

セミナー開催情報

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

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

5つの「く」

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

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

オススメ外部リンク

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

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

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

オススメのスライド

お問い合わせ

リンク

このページの上部に戻る