HTML へのコンテンツの書き出し

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

InDesign は、ストーリー、リンクと埋め込み画像、SWF ムービーファイル、脚注、テキスト変数（テキストで）、箇条書きリストと自動番号リスト、内部相互参照、テキストや web ページにジャンプするハイパーリンクをすべて書き出します。表を HTML に書き出すこともできます。その際、表およびセルの罫線など、表の書式設定も保持されます。表には固有の ID が割り当てられ、Dreamweaver で Spry データセットとして参照できます。配置されたオーディオファイルと h.264 ビデオファイルは HTML5 <audio> タグおよび <video> タグで囲まれます。InDesign では、描画オブジェクト（長方形、楕円、多角形など）、ペーストされたオブジェクト（ペーストされた Illustrator の画像を含む）、およびアウトラインに変換されたテキストも書き出します。

書き出されない内容

InDesign では、ハイパーリンク（web ページへのリンクや同じドキュメント内のテキストアンカーにジャンプするテキストに適用されるリンクを除く）、XML タグ、ブック、ブックマーク、SING グリフレット、ページトランジション、索引マーカー、ペーストボード上の選択されていないページに接していないオブジェクト、親ページアイテム（書き出す前に既にオーバーライドした、または選択した場合を除く）は書き出されません。

HTML への書き出し

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

HTML 書き出しオプション

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

一般

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

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

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

ページレイアウトを基準にする：ページ上のアイテムの位置によって読み上げ順序が決まります。

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

（アジア言語版のみ）「ページレイアウトを基準にする」を選択した場合、InDesign によるページオブジェクトの読み上げ順序は、ドキュメントの綴じ方（左から右または右から左）に従って決定されます。

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

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

箇条書きと自動番号処理のフォーマットオプションを選択します。

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

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

● 番号付きリストにマップ：自動番号リストを HTML でタグを使用してフォーマットされたリストアイテムに変換します。

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

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

画像

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

オリジナル：オリジナル画像を「<ドキュメント名>-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 ページ内のブロックレベルの要素の位置を制御できます。

HTML にクラスを含めない場合は、このオプションを選択します。これにより、HTML 書き出し中にタグ内に存在するクラス属性と ID 属性が削除されます。HTML 内に存在する重複する div タグも削除されます。

HTML にクラスを含めるには、このオプションを選択します。

CSS を生成：InDesign で書き出すファイルの CSS を生成するかどうかを指定します。「CSS を生成」オプションを選択すると、「ローカルオーバーライドを保持」オプションも選択して、斜体や太字などのローカルの書式設定を含めることができます。

ローカルオーバーライドを保持：斜体や太字などのローカルの書式設定が含まれます。

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

HTML ページが開かれたときに JavaScript を実行させるには、「スクリプトを追加」を選択します。InDesign では JavaScript の存在や有効性は検証されません。