HTML へのコンテンツの書き出し | CS6 および CS5.5

HTML への書き出しは、InDesign コンテンツを web 対応形式にする簡単な方法です。コンテンツを HTML に書き出すときに、テキストと画像の書き出し方法を調整できます。InDesign では、同じ名前の CSS スタイルクラスで HTML コンテンツをマークアップすることで、書き出されるコンテンツに適用された段落スタイル、文字スタイル、オブジェクトスタイル、目次スタイル、およびセルスタイルの名前を保持します。Adobe Dreamweaver やその他の CSS 対応 HTML エディターを使用して、コンテンツに形式やレイアウトを簡単に適用できます。

InDesign は、ストーリー、リンクと埋め込み画像、SWF ムービーファイル、脚注、テキスト変数（テキストで）、箇条書きリストと自動番号リスト、内部相互参照、テキストや web ページにジャンプするハイパーリンクをすべて書き出します。テーブルも書き出されますが、テーブルとセルの罫線など、一部の書式は除外されます。表には固有の ID が割り当てられ、Dreamweaver で Spry データセットとして参照できます。配置されたオーディオファイルと h.264 ビデオファイルは HTML5 <audio> タグおよび <video> タグで囲まれます。

ユーザーが描画したオブジェクト（長方形、楕円形、多角形など）、ハイパーリンク（web ページへのリンクや同じドキュメント内のテキストアンカーにジャンプするテキストに適用されたリンクを除く）、ペーストしたオブジェクト（ペーストした Illustrator 画像を含む）、アウトラインに変換したテキスト、XML タグ、ブック、ブックマーク、SING グリフレット、ページ効果、索引マーカー、ペーストボード上の選択されていないページに接していないオブジェクト、親ページアイテム（書き出す前に既にオーバーライドした、または選択した場合を除く）は書き出されません。

指定した名前と .html 拡張子を持つドキュメント（「newsletter.html」など）が作成され、指定した場合は web 画像サブフォルダー（「newsletter-web-images」など）が同じ場所に保存されます。

HTML 書き出しオプションダイアログボックスで、次のオプションを指定します。

共通オプション

「一般」セクションには次のオプションがあります。

選択したアイテムのみを書き出すか、ドキュメント全体を書き出すかを指定します。テキストフレームを選択した場合は、オーバーセットテキストを含むすべてのストーリーが書き出されます。

ドキュメントを選択した場合は、すべてのスプレッドのすべてのページアイテムが書き出されます。ただし、オーバーライドされていない親ページアイテムと隠れたレイヤー上のページアイテムは書き出されません。XML タグおよび生成された索引と目次も無視されます。

ページオブジェクトの読み上げ順序を指定できます。

ページレイアウトを基準にする

ページ上のアイテムの位置によって読み上げ順序が決まります。

「ページレイアウトを基準にする」を選択した場合、InDesign によるページオブジェクトの読み上げ順序は、左から右、上から下になります。場合によっては（特に、複雑な複数段組ドキュメントの場合は）、デザイン要素が目的の読み上げ順序に表示されないことがあります。コンテンツを再配置およびフォーマットするには、Dreamweaver を使用します。

（アジア言語版のみ）「ページレイアウトを基準にする」を選択した場合、InDesign によるページオブジェクトの読み上げ順序は、ドキュメントの綴じ方（左から右または右から左）に従って決定されます。場合によっては（特に、複雑な複数段組ドキュメントの場合は）、書き出されたデザイン要素が目的の読み上げ順序に表示されないことがあります。コンテンツを再配置およびフォーマットするには、Dreamweaver を使用します。

XML 構造と同じ

「XML 構造と同じ」を選択した場合、XML 構造ウィンドウによって、書き出されるコンテンツの順序および書き出されるコンテンツが制御されます。コンテンツに既にタグが設定されている場合、XML 構造ウィンドウでタグをドラッグするだけで、XHTML の書き出しの順序を設定できます。コンテンツにタグが設定されていない場合、構造パネルメニューから「タグ付けされていないアイテムを追加」を選択して、順序の変更が可能なタグを生成できます。アイテムを書き出しに含めたくない場合は、XML 構造ウィンドウでタグを削除するだけで済みます（タグを削除しても、INDD ファイルからコンテンツが削除されることはありません）。詳しくは、ページアイテムのタグ付けを参照してください。

アーティクルパネルと同じ

アーティクルパネルのエレメントの順序に従って読み取り順序が決定されます。チェック済みのアーティクルのみが書き出されます。書き出しにアーティクルを含めるを参照してください。

単純なマージンを EM またはピクセルで指定します。EM スペースでマージンを指定する方がマルチスクリーンとの互換性に適しています。上下左右のすべてのマージンに同じ値が適用されます。

箇条書きの段落をリストアイテムに変換するには「番号なしリストにマップ」を選択します。リストアイテムは HTML で <ul> タグを使用してフォーマットされます。<p> タグを使用して箇条書き記号をテキストとしてフォーマットするには「テキストに変換」を選択します。InDesign のネイティブの自動箇条書きを使用した場合は、小段落の箇条書きも対象となります。

HTML ファイルでの番号の変換方法を指定します。InDesign の自動番号リストを使用した場合は、下位レベルの段落の箇条書きも対象となります。

自動番号リストをリストアイテムに変換します。リストアイテムは HTML で <ol> タグを使用してフォーマットされます。

自動番号リストをリストアイテムに変換しますが、InDesign で段落に現在付けられている番号に基づいて <value> 属性を割り当てます。

自動番号リストを、番号を含め、テキストとして現在の番号で始まる段落に変換します。

ブラウザーを起動します（存在する場合）。

画像オプション

HTML への画像の書き出し方法を指定します。

オリジナル画像を「<document_name>-web-images」サブフォルダーに書き出します。このオプションを選択すると、他のすべてのオプションが選択不可になります。

画像の書き出し方法の設定は変更できます。

このオプションにより、サブフォルダーへ画像を書き出すのではなく、画像ファイルの前に表示されるローカル URL（「images¥」など）を入力できます。HTML コードでは、リンク属性により指定したパスと拡張子が表示されます。このオプションは、画像を自身で web 互換の画像として変換している場合は特に便利です。

オンにすると、画像オブジェクト属性がレイアウトから継承されます。

画像の解像度を ppi で指定します。オペレーティングシステムは 72 ppi または 96 ppi で標準化されていますが、モバイルデバイスは 132 ppi（iPad） ～ 172 ppi（Sony リーダー）、300 ppi（iPhone 4）以上と解像度が異なります。選択したオブジェクトごとに ppi 値を指定できます。値には、72、96、150（現在のすべての電子ブックデバイスの平均）、および 300 があります。

画像サイズを固定するか、ページを基準にして変更するかを指定します。「ページを基準とする相対指定」を選択すると、InDesign ページ幅を基準として画像サイズに基づいて相対的なパーセント値が設定されます。このオプションを使用すると、読み取り領域の幅に基づいて縦横比率を維持したまま画像サイズが変更されます。

画像の左揃え、中央揃え、右揃え、前後の間隔を指定します。

オンにすると、これらの設定がアンカー付きオブジェクトに適用されます。

ドキュメントの最適化画像を GIF、JPEG または PNG のいずれに変換するかを選択します。各画像でどれを使用するか、InDesign で決定されるようにするには、「自動」を選択します。「PNG」を選択すると、画像圧縮設定が無効になります。データ損失がない画像、または透明を含む画像には「PNG」を使用します。

最適化 GIF ファイルを作成する場合の、InDesign でのカラーの処理を調整します。GIF 形式は、256 色以下のカラーパレットを使用しています。

「使用中のカラーに合わせて割り付ける（ディザなし）」を選択すると、ディザ処理（カラーの小さな点を混ぜて存在しないカラーを表現する）をせずに、グラフィックで中心的に使われているカラーを抽出してパレットを作成します。「Web」を選択すると、web セーフカラーのパレットを作成します（Windows と macOS のシステムカラーのサブセットです）。組み込みのカラーパレットを使用してパレットを作成するには、「システム（Windows）」または「システム（macOS）」を選択します。これにより、予想外の結果になることがあります。

「インターレース」を選択すると、画像は順次、表示されていない行を埋めるようにして徐々に表示されます。このオプションを選択していない場合、ぼやけて表示されていた画像が、元の解像度に近くなるにつれて徐々に明確になります。

作成する JPEG 画像ごとの圧縮率（ファイルサイズをより小さくするため）および画質を決定します。低解像度の場合はファイルサイズは最小になり、画質も最も低くなります。

HTML ページを開いてから、どのくらい速く JPEG 画像が表示されるかを指定します。「プログレッシブ」を選択すると、JPEG 画像は web ブラウザーにダウンロードされるにしたがって徐々に詳細が表示されます。このオプションを指定して作成されたファイルは、サイズがやや大きくなります。また、表示のためによりメモリが要求されます。「ベースライン」を選択すると JPEG ファイルが完全にダウンロードされてから表示されます。ダウンロードが終了するまでは、JPEG ファイルの代わりにプレースホルダーが表示されます。

個々の画像に適用されたオブジェクト書き出しオプションを無視します。オブジェクト書き出しオプションの適用を参照してください。

詳細オプション

CSS や JavaScript のオプションを設定するには、「詳細」セクションを使用します。

カスケーディングスタイルシート（CSS）は、web ページのアピアランスを制御するフォーマットルールの集まりです。ページのフォーマットに CSS を使用すると、コンテンツと表示を切り分けることができます。ページのコンテンツ（HTML コード）は、HTML ファイル自体に格納されますが、コードの表示を定義する CSS ルールは、他のファイル（外部スタイルシート）または HTML ドキュメント（通常 <HEAD> セクション）に格納されます。例えば、選択したテキストに異なるフォントサイズを指定でき、CSS を使用してフォーマットや web ページ内のブロックレベルの要素の位置を制御できます。

XHTML に書き出すときは、宣言（属性）で HTML ファイルの <HEAD> セクションに表示される CSS スタイルのリストを作成できます。

「スタイル定義を含む」を選択した場合、InDesign テキスト書式と CSS の相当する属性の対応付けが試行されます。このオプションの選択を解除すると、HTML ファイルに空の宣言が含まれます。これらの宣言は、後で Dreamweaver で編集できます。

「ローカルオーバーライドを保持」を選択した場合、斜体や太字などのローカルの書式設定が含まれます。

このオプションを選択すると、HTML ファイルから CSS セクションが省略されます。

既存の CSS スタイルシートの URL を指定します。通常は、「/styles/style.css」などの相対 URL です。InDesign では、CSS の存在や有効性は検証されないため、Dreamweaver を使用して外部 CSS の設定を確認する必要があります。

CSS を指定するには、「スタイルシートを追加」ボタンを使用します。

HTML ページが開かれたときに JavaScript を実行させるには、外部 JavaScript へリンクさせます。JavaScript への URL を指定します。通常は相対 URL です。InDesign では JavaScript の存在や有効性は検証されません。

その他の関連ヘルプ

Adobe InDesign を使用すると、電子ブック、パンフレット、チラシ、はがき、ポスター、インタラクティブページレイアウトなどを作成および発行できます。