マニュアル キャンセル

HTML(レガシー)へのコンテンツの書き出し

ページ、スプレッド、または選択したオブジェクトを HTML(レガシー)の種類に書き出す方法について説明します。

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

HTML(レガシー)への書き出し

  1. ドキュメント全体を書き出さない場合は、書き出すテキストフレーム、テキストの範囲、表のセル、またはグラフィックを選択します。
  2. ファイル書き出しを選択し、「ファイルの種類」(Windows)または「形式」(macOS)から「HTML(レガシー)」を選択します。

  3. HTML ドキュメントの名前と保存場所を指定して、「保存」を選択します。

  4. HTML 書き出しオプションダイアログボックスから、「全般」、「画像」および「詳細」セクションで目的のオプションを指定して、「OK」を選択します。

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

HTML 書き出しオプション

全般

様々なオプションを表示する「全般」タブ
全般オプション

書き出し

選択したアイテムのみを書き出すか、ドキュメント全体を書き出すかを指定します。

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

コンテンツの順序

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

  • ページレイアウトを基準にする:ページ上のアイテムの位置によって読み上げ順序が決まります。InDesign によるページオブジェクトの読み上げ順序は、左から右、上から下になります。(アジア言語版のみ)InDesign によるページオブジェクトの読み上げ順序は、ドキュメントの綴じ方(左から右または右から左)に従って決定されます。
  • XML 構造と同じ構造ビューでのタグの順序に従って読み取り順序が決定されます。詳しくは、ページアイテムのタグ付けを参照してください。
  • アーティクルパネルと同じアーティクルパネルのエレメントの順序に従って読み取り順序が決定されます。チェック済みのアーティクルのみが書き出されます。

フォーマットのオプション

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

 

書き出した後 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 ページ幅を基準としたテキストフローに基づいて相対的なパーセント値が設定されます。このオプションを使用すると、読み取り領域のテキストに基づいて縦横比率を維持したまま画像サイズが変更されます。

画像の整列および間隔

画像の左端揃え、中央揃え、右端揃えを指定します。上下の間隔も指定できます。

画像変換

ドキュメントの最適化画像を GIFJPEG または PNG のいずれに変換するかを指定します。各インスタンスで使用する形式を InDesign で決定するには、「自動」を選択します。

GIF オプション

  • パレット:GIF ファイルを最適化する場合に、InDesign でのカラーの処理を調整できます。GIF 形式は、256 色以下のカラーパレットを使用しています。「使用中の色に合わせて割り付ける (ディザなし)」を選択すると、ディザ処理(カラーの小さな点を混ぜて存在しないカラーを表現する)をせずに、グラフィックで中心的に使われているカラーを抽出してパレットを作成します。「Web」を選択すると、web セーフカラーのパレットを作成します(Windows と macOS のシステムカラーのサブセットです)。組み込みのカラーパレットを使用してパレットを作成するには、「システム(Windows)」または「システム(macOS)」を選択します。このオプションを使用すると、予期しない結果が生じることがあります。
  • インターレース:表示されていない行を埋めるようにして、徐々に画像を読み込みます。このオプションの選択を解除すると、画像がぼやけて見え、元の解像度に近くなるにつれて徐々に鮮明になります。

JPEG オプション

  • 画質:作成する JPEG 画像ごとの圧縮率(ファイルサイズをより小さくするため)および画質を決定します。低解像度の場合はファイルサイズは最小になり、画質も最も低くなります。
  • フォーマット:ブラウザーで JPEG 画像が含まれるファイルを開いてから、その画像が表示されるまでの速さを指定します。「プログレッシブ」を選択すると、JPEG 画像は web ブラウザーにダウンロードされるにしたがって徐々に詳細が表示されます。各 JPEG ファイルがダウンロードされた後にのみ表示するベースラインを選択します。画像がダウンロードされるまでは、プレースホルダーが表示されます。

オブジェクト書き出し設定を無視

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

詳細

詳細オプション
詳細オプション

HTML にクラスを含めない

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

HTML にクラスを含める

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

  • CSS を生成:InDesign で書き出すファイルの CSS を生成するかどうかを指定します。
  • ローカルオーバーライドを保持:斜体や太字などのローカルの書式設定が含まれます。

スタイルシートを追加

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

JavaScript オプション

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

InDesign で書き出されるもの

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

InDesign で書き出されないもの

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

その他の関連ヘルプ

ご質問または共有するアイデアがある場合

コミュニティで質問する(英語)

ご質問がある場合や、ご共有いただけるアイデアをお持ちの場合は、Adobe InDesign コミュニティにご参加ください。皆様からのご意見や作品をお待ちしております。

ヘルプをすばやく簡単に入手

新規ユーザーの場合