イトウ先生のTipsnoteInDesign CC・タグを割り当て

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 11月・12月・日曜開講のお知らせ
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 InDesign CCの新機能:タグを割り当て 】 

今週は、InDesign CCの機能の中から、「タグを割り当て」に関する機能をご紹介していきます。
「タグを割り当て」という機能は、ドキュメント内のテキスト等にh1〜h6の見出しタグや、p、em、span、strongなどの指定を行い、その指定したタグでHTMLファイルやePubへと書き出すことができる機能です。この機能そのものはCS5.5から搭載されていましたが、CCではこの「タグを割り当て」機能がさらに強化され、フレーム等のオブジェクトに対しても、divタグやspanタグの割当も可能になりました。 CSSのfloatプロパティをInDesignで指定することが可能であるため、InDesignで可能なマークアップについてご紹介していきます。

段落・文字スタイルの作成時に、タグを割り当てる。

段落に対するタグの割り当ては、通常通りの手順で段落スタイルを登録した後、段落スタイルの編集ウインドウ内で、「タグを書き出し」を選択します。P、h1〜h6までの割り当てが可能です。クラス名は、段落スタイル名がそのまま使用されますが、InDesign上では日本語の段落スタイル名を使用し、CSS用にアルファベットで作成する場合は、「クラス」の箇所に命名規則に従って設定します。
CSSに含める、のチェックを入れると、外部CSSの中にクラスを書き出しますが、チェックを入れないとインラインや内部CSSとして書き出すかというとそうではなく、このチェックを入れないと、このスタイルのCSSそのものを書き出しません。

idcc_tag004

また、テキストキャラクタ1文字や、1単語単位でタグの割り当てを行う場合は、段落スタイルと同様に文字スタイルで設定します。文字スタイルでは、em、span、strongの割り当てが可能です。

idcc_tag005

フレームに対するタグの割り当て

InDesign CCから新規に搭載された機能が、フレーム等のオブジェクトに対する「タグの割り当て」になります。これは、段落スタイルや文字スタイル同様、オブジェクトスタイルパネル内で設定するようになっており、選択中のフレームをdivまたはspanのどちらで書き出すかを指定できるようになりました。

idcc_tag007

なお、この「タグの割り当て」を自動にしている場合、例えば画像の場合は、テキストフレームとは別にグラフィックフレームを作成し、画像を貼って書き出すと、divタグの中にimgタグで書き出されます。インライングラフィックとして配置している画像は、spanでマークアップされます。

idcc_tag010

ブロックレベルのdivタグと、インライン要素のspan、ということになりますので、画像の前後で改行したいかどうかで、InDesign上でどのように作成するか?を工夫すればよい、ということになりますが、この時に使用するタグを指定できるようになりました。
また、オブジェクトスタイルの作成時に、floatを設定し、回り込みをかけることも可能です。オブジェクトスタイルオプションのウインドウ内にある書き出しオプションから、「EPUBおよびHTML」を選択し、レイアウトのカスタム設定から、左にフロートまたは右にフロートを選択します。

idcc_tag008

この設定を行い、CSSを書き出すと、float:left、float:rightのプロパティと値で書き出されます。このフロートを単体でかける場合は、オブジェクトメニュー→オブジェクト書き出しオプションでも設定することが可能ですが、InDesign上での画面の見た目として回り込まれるわけではありません。あくまでもブラウザで見た時のfloatを有効にするためで、プリントを目的としたテキストの回り込みを行う場合は、従来からの機能である「テキストの回り込み」パネルで設定します。あくまでも、プリントを目的とした場合の回り込みと、ブラウザ上での回り込みは別、という捉え方でいいかと思います。

書き出されるHTMLとCSS

HTML及びCSS、またはePubでの書き出しは、ファイルメニューから書き出しで行いますが、書き出したHTMLはHTML5のDOCTYPEになっており、またCSSはWebkitとePubのベンダープレフィックス付きで書き出されます。

idcc_tag012

InDesignのアプリケーションの役割を考えると、元々Webサイトを作成するためのアプリケーションではなく、HTMLやCSSの用途としてはやはり電子書籍となりますので、ePub書き出しではなくHTML書き出しを行った場合でも、電子書籍として閲覧することを考慮された書き出し方になっているのも理解できます。

関連講座

◆ HTML・XHTML・CSSの基礎知識〜これからWebサイトを作る方へ!
◆ InDesign CS6 の使い方・基本トレーニング
※InDesign CCの使い方・基本トレーニングは開講準備中です。

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |