マニュアル キャンセル

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

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

平等な言葉遣い:アドビのコアとなる包括性の価値を反映するために、InDesign 2022(バージョン 17.0)以降の非包括的言語を置き換えます。英語、デンマーク語、ハンガリー語、スペイン語、イタリア語、ブラジル語、ポルトガル語、および日本語のロケールのヘルプ記事では、マスターページへの参照はすべて親ページに置き換えられます

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 への書き出し

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

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

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

指定した名前と .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 を表示:

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

画像

画像オプション
画像オプション

画像をコピー:

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

オリジナル:オリジナル画像を「<ドキュメント名>-web-images」サブフォルダーに書き出します。

最適化:画像の書き出し方法の設定を変更できます。

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

レイアウトのアピアランスを保持:

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

解像度(ppi):

画像の解像度を 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 オプション(パレット):

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

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

JPEG オプション(画質):

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

JPEG オプション(形式):

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

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

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

詳細

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

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

HTML にクラスを含めない:

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

HTML にクラスを含める:

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

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

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

スタイルシートを追加:

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

JavaScript オプション:

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

アドビのロゴ

アカウントにログイン