HTML のスライドを 1 枚 1 ページの PDF にする

ブラウザでそのまま印刷するとどうなるか

HTML のスライドをブラウザで開き、印刷画面から PDF に保存すると、次のようなことが起きやすい。

• スライドが用紙の途中で切れ、1 枚が 2 ページにまたがる。
• 背景色や背景画像が消えて、白地に文字だけが残る。
• 横長のスライドが A4 縦の用紙に縮められ、上下が余白だらけになる。
• 表示中の 1 枚しか印刷されない（スライドを JavaScript で切り替えている資料）。

なぜそうなるのか

ブラウザの印刷は、ページ全体を用紙の大きさで上から順に区切っていく。HTML には「ここまでが 1 枚のスライド」という決まりが無いので、スライドの境目で改ページするよう CSS で指定（break-after: page）していなければ、用紙の途中で切れる。

用紙の大きさは、CSS の @page で決まる。指定が無ければ印刷画面で選んだ用紙（多くは A4 縦）になり、横長のスライドは幅が収まるように縮められる。

背景が消えるのは、ブラウザがインクを節約するために、既定では背景色と背景画像を印刷しないからだ。CSS で print-color-adjust: exact を指定するか、印刷画面の詳細設定で「背景のグラフィック」をオンにすると印刷される。

reveal.js のように、画面では今のスライド以外を隠して 1 枚ずつ見せる作りの資料は、隠したまま印刷されるので、表示中の 1 枚しか出ないことがある。

chamfer で 1 枚 1 ページの PDF にする

chamfer の「PDF として」は、上の指定を印刷用のコピーに足してから、ブラウザの印刷画面に渡す。元の HTML は書き換えない。

1. chamfer.takushio2525.com を開き、HTML ファイルを画面にドロップする（CSS や画像が別のファイルなら、フォルダごと）。直したいところがあれば先に直す。
2. ツールバーの「書き出し」を押し、「PDF として」を選ぶ。
3. 「PDF として保存する」の案内が出るので、「印刷ダイアログを開く」を押す。
4. 印刷画面の「送信先」で「PDF に保存」を選び（Chrome の場合）、「保存」を押して置き場所を決める。

用紙の大きさ・余白ゼロ・背景の印刷は chamfer の側で指定してあるので、印刷画面のほかの設定は触らなくてよい。PDF を作るのはブラウザ自身の印刷機能なので、ファイルはどこにも送られない。文字は画像にならず文字のまま残るので、PDF の中で選択や検索ができ、拡大しても粗くならない。

chamfer が印刷用に足していること

• 用紙の大きさを、スライドの実寸にする。CSS に書かれたスライドの幅と高さ（たとえば 1280×720px）を読んで、そのまま用紙にする。寸法が書かれていない複数ページの資料は 1280×720px、ページの区切りが無い 1 枚ものの文書（LP やレポート）は A4 縦にして、本文を流し込む。
• スライドごとに改ページする。最後の 1 枚の後ろには白紙を出さない。
• すべての要素に、背景色と背景画像を印刷する指定を付ける。
• 画面では 1 枚ずつ隠して見せている資料（reveal.js など）も、全部のスライドを並べて印刷する。資料の中のスクリプトは止めたままなので、印刷の直前にスライドが隠し直されることもない。
• スライドの高さを画面の高さ（100vh）で決めている資料は、紙の上では高さが定まらず 1 枚が 2 ページに割れるので、スライドの箱を用紙と同じ大きさに揃える。
• 選択の枠やボタンなど、chamfer の画面の部品は PDF に入れない。

うまくいかないとき

はみ出した分が次のページに出る

スライドの幅と高さが決まっている資料で、中身がスライドの枠からはみ出していると、はみ出した分が次のページに出る。chamfer ではみ出している要素を選び、文字サイズを小さくするか、位置と大きさを直してから書き出し直す。

1 枚 1 ページにならない

印刷画面で「倍率」や「余白」、用紙の大きさを変えると、chamfer の指定とずれて 1 枚 1 ページにならないことがある。既定のまま保存する。

背景が白くなる

chamfer は背景を印刷する指定を付けているが、それでも消える場合は、印刷画面の詳細設定で「背景のグラフィック」をオンにする。

画像やフォントが出ない

HTML の外にある CSS や画像を参照している資料を、HTML だけで開いた可能性がある。フォルダごと開き直してから書き出す（別のファイルになっているとき）。

PDF の代わりに「発表用の HTML」で渡す

人前で映すのが目的なら、PDF にせず HTML のまま渡す手もある。chamfer の「発表用スライドとして」は、開始画面・矢印キーやクリックでの送り・全画面表示を同梱した 1 枚の HTML を書き出す。渡した相手はブラウザで開くだけで発表でき、chamfer は要らない。

JavaScript が動かない環境で開くと、送りの仕組みは現れず、スライドが縦に並んだ普通のページとして読める。書き出した発表用 HTML を chamfer で開き直すと、同梱した仕組みは外れて元の資料に戻るので、あとから直すこともできる。

自分で印刷用の CSS を足すときの要点

chamfer を使わず、HTML に印刷用の CSS を足して解決することもできる。要点は、用紙の大きさをスライドに合わせる・スライドごとに改ページする・背景を印刷する・スライドの margin を 0 にする、の 4 つ。スライドが <section class="slide"> で、1280×720px の場合の例:

@page {
  size: 1280px 720px; /* スライドの幅と高さ */
  margin: 0;
}

@media print {
  html,
  body {
    margin: 0;
    padding: 0;
  }
  .slide {
    width: 1280px;
    height: 720px;
    margin: 0; /* 上下の余白を消す。改ページの後ろの margin は消えずに残る */
    border-radius: 0; /* 角丸のままだと、四隅に下地の色がのぞく */
    overflow: hidden;
    break-after: page; /* 1 枚ごとに改ページ */
  }
  .slide:last-child {
    break-after: auto; /* 最後の 1 枚の後ろに白紙を出さない */
  }
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact; /* 背景色と背景画像も印刷する */
  }
}

見落としやすいのは margin だ。AI が作るスライドには margin: 40px auto のように上下の余白が付いていることが多い。改ページ（break-after: page）の手前の margin は 0 に切り詰められるが、後ろの margin は次のページの先頭に残る（CSS の仕様の決まり。CSS Fragmentation Module Level 3 の 5.2）。そのため、各スライドが上の余白の分だけ下にずれて始まり、用紙からはみ出した下端が次のページに送られて、5 枚が 10 ページに割れる。印刷のときはスライドと body の margin を 0 にしておく。

スライドを JavaScript で 1 枚ずつ隠している資料は、印刷のときだけ隠しているスライドを表示させる。スライドの中身を flex や grid で並べている資料では、block の代わりにその値を書く。

@media print {
  .slide {
    display: block !important; /* JavaScript で隠しているスライドも印刷する */
  }
}

スライドのクラス名は資料によって違う（.slide・.page・section など）ので、開発者ツールで確かめてから書き換える。スライドのあとに別の要素が続く資料では :last-child が効かず、最後に白紙が 1 枚出ることがある。画面の表示に影響させたくない指定は @media print の中に入れておく。