マニュアル キャンセル

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

  1. InDesign ユーザーガイド
  2. InDesign とは
    1. InDesign の概要
      1. InDesign の新機能
      2. 必要システム構成
      3. よくある質問
      4. Creative Cloud ライブラリの使用
    2. ワークスペース
      1. ワークスペースの基本
      2. コンテキストタスクバー
      3. InDesign でのワークスペースのカスタマイズ
      4. Toolbox
      5. 環境設定の指定
      6. プロパティパネル
      7. タッチワークスペース
      8. デフォルトのキーボードショートカット
      9. 編集の取り消しとヒストリーパネルの管理
      10. ドキュメントの復元と取り消し
    3. 生成 AI(中国本土ではご利用いただけません)
      1. テキストから画像生成
      2. 生成拡張
      3. InDesign の効果を生成(Beta)
      4. 生成 AI に関する FAQ
  3. ドキュメントの作成とレイアウト
    1. ドキュメントとページ
      1. ドキュメントの作成
      2. 親ページの使い方
      3. ドキュメントページで作業する
      4. ページサイズ、マージン、裁ち落としの設定
      5. ファイルとテンプレートを使用した作業
      6. InDesign(Beta)で PDF を InDesign ファイルに変換
      7. ブックファイルの作成
      8. 基本的なページ番号の追加
      9. ページ、章、セクションの番号の設定
      10. QuarkXPress および PageMaker ドキュメントの変換
      11. コンテンツの共有
      12. ファイル管理の基本ワークフロー
      13. ドキュメントの保存
    2. グリッド
      1. グリッド
      2. グリッドの書式設定
    3. レイアウト補助
      1. 定規
      2. 定規を使用したオブジェクトの整列と分布
      3. ものさしツールを使用したオブジェクトの測定
  4. コンテンツの追加
    1. テキスト
      1. テキストのフレームへの追加
      2. テキストの連結
      3. 東南アジア言語のスクリプト
      4. アラビア語版およびヘブライ語版の機能(InDesign)
      5. パステキストの作成
      6. 箇条書きと自動番号の使用
      7. MathML を挿入して数式を作成
      8. グリフと特殊文字
      9. テキスト組版
      10. テキスト変数
      11. QR コードの作成
      12. テキストの編集
      13. テキストの行揃え
      14. オブジェクトへのテキストの回り込み
      15. アンカー付きオブジェクト
      16. リンクコンテンツ
      17. 段落の書式設定
      18. 文字の書式設定
    2. テキスト編集
      1. InDesign でのフォントの使用
      2. カーニングと字送り
      3. 文字の拡大・縮小とゆがみ
      4. 文字へのカラー効果の適用
    3. テキストの書式設定
      1. テキストの書式設定
      2. テキストのスタイルの自動設定
      3. スタイルパックの操作
      4. タブおよびインデント
    4. レビューテキスト
      1. 変更のトラックとレビュー
      2. InDesign での注釈の追加
      3. PDF コメントの読み込み
    5. スペルチェックと言語の辞書
      1. スペルチェック、スペル自動修正、ダイナミックスペルチェック
      2. 辞書と単語を作成、追加、管理する
      3. 辞書の環境設定の変更
      4. Duden 辞書
    6. 参照を追加
      1. 目次の作成
      2. 脚注
      3. 索引の作成
      4. 後注
      5. キャプション
    7. スタイル
      1. 段落スタイルと文字スタイル
      2. スタイルのマッピング、書き出し、管理
      3. オブジェクトスタイル
      4. ドロップキャップと先頭文字スタイル
      5. スタイルの操作
      6. 行送り
      1. 表の書式設定
      2. 表の作成
      3. 表およびセルのスタイル
      4. 表の選択と編集
      5. 表の罫線および塗り
    8. インタラクティブ機能
      1. ハイパーリンク
      2. ダイナミック PDF ドキュメント
      3. ブックマーク
      4. ボタン
      5. フォーム
      6. アニメーション
      7. 相互参照
      8. PDF の構造化
      9. ページ効果
      10. ムービーとサウンド
    9. グラフィック
      1. パスとシェイプ
      2. 鉛筆ツールを使用した描画
      3. ペンツールを使用した描画
      4. 線の設定の適用 
      5. 複合パスと複合シェイプ
      6. パスの編集
      7. クリッピングパス
      8. 角の形状の変更
      9. フレームとオブジェクト
      10. オブジェクトの整列と分布
      11. リンクと埋め込み画像
      12. AEM Assets の統合
    10. カラーと透明度
      1. カラーの適用
      2. 配置したグラフィックのカラーの使用
      3. スウォッチを使用した作業
      4. インキの混合
      5. 濃淡
      6. 特色とプロセスカラー
      7. ブレンドカラー
      8. グラデーション
      9. 透明が使用されているアートワークの統合
      10. 透明効果の追加
  5. 検索と置換
    1. テキストの検索と置換
    2. フォントの検索と置換
    3. 字形の検索と置換
    4. 正規表現とクエリを使用した検索と置換
    5. オブジェクトの検索と置換
    6. カラーの検索と置換
    7. 検索および置換を行うための検索オプション
  6. 共有
    1. クラウドドキュメントの保存とアクセス
    2. クラウドドキュメントの整理、管理、共有
    3. クラウドドキュメントのバージョンの表示と管理
    4. InDesign クラウドドキュメントのよくある質問
    5. InCopy web 版(Beta)
    6. 共有とコラボレーション        
    7. レビュー用に共有
    8. 共有された InDesign ドキュメントをレビュー
    9. フィードバックの管理
    10. 編集に招待
  7. 書き出し、読み込み、および公開
    1. 配置、書き出しおよび公開
      1. Publish Online
      2. Publish Online ダッシュボード
      3. グラフィックのコピーと挿入
      4. Adobe Express に書き出し
      5. EPUB へのコンテンツの書き出し
      6. Adobe PDF オプション
      7. HTML5 への書き出し
      8. HTML(レガシー)へのコンテンツの書き出し
      9. Adobe PDF への書き出し
      10. JPEG 形式での書き出し
      11. SVG ファイルの読み込み
      12. DPS および AEM Mobile の概要
      13. サポートされるファイル形式
      14. ユーザー設定の書き出しと読み込み
    2. プリント
      1. ブックレットのプリント
      2. トンボと裁ち落とし
      3. 文書のプリント
      4. インキ、色分解、スクリーン線数
      5. オーバープリント
      6. PostScript ファイルと EPS ファイルの作成
      7. 入稿前のプリフライトファイル
      8. サムネールと用紙サイズより大きいドキュメントの印刷
      9. 印刷・出力会社用の PDF の準備
      10. 色分解出力の準備
  8. InDesign の拡張
    1. 自動化
      1. データ結合
      2. プラグイン
      3. InDesign で拡張機能をキャプチャする
      4. スクリプト
  9. トラブルシューティング
    1. 修正された問題
    2. 既知の問題
    3. 起動時のクラッシュ
    4. 環境設定フォルダー読み取り専用エラー
    5. ファイルの問題のトラブルシューティング
    6. InDesign ファイルを PDF に書き出すことができません
    7. InDesign 文書復旧

ページ、スプレッド、または選択したオブジェクトを 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 コミュニティにご参加ください。皆様からのご意見や作品をお待ちしております。

 Adobe

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

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト