FUNBREW PDFFUNBREW PDF
2026/05/10

CSS to PDF チートシート｜印刷スタイルの落とし穴と即効スニペット集

CSSPDF生成印刷スタイルシートチートシートチュートリアル

HTMLからPDFを生成するとき、ブラウザで完璧に表示されていたページがPDFになると崩れる――開発者なら一度は経験するはずです。

このチートシートでは、CSS to PDF変換で頻出する設定をカテゴリ別にまとめます。Puppeteer・Playwright・FUNBREW PDFなど、ChromiumベースのPDFエンジンで動作します。完全な解説が必要な方はCSSプリントスタイルシート完全ガイドを参照してください。

1. 用紙サイズと向き（@page）

/* A4縦 */
@page { size: A4; }

/* A4横 */
@page { size: A4 landscape; }

/* レターサイズ */
@page { size: letter; }

/* カスタムサイズ（幅 × 高さ） */
@page { size: 210mm 297mm; }

落とし穴: @page 内では CSS カスタムプロパティ（var()）が使えません。値はハードコードしてください。

2. ページ余白の制御

/* 全方向均一 */
@page { margin: 20mm; }

/* 方向別に個別指定 */
@page {
  margin-top: 25mm;
  margin-bottom: 20mm;
  margin-left: 15mm;
  margin-right: 15mm;
}

/* 最初のページだけ余白なし */
@page :first { margin: 0; }

/* 左右ページで余白を変える（製本向け） */
@page :left  { margin-left: 25mm; margin-right: 15mm; }
@page :right { margin-left: 15mm; margin-right: 25mm; }

3. 改ページの制御

/* このセクションの前で必ず改ページ */
.chapter {
  break-before: page;
  page-break-before: always; /* レガシーフォールバック（必須） */
}

/* このセクションの後で改ページ */
.section-end {
  break-after: page;
  page-break-after: always;
}

/* ボックス内で改ページしない */
.card {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* テーブル行で切れないようにする */
tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

落とし穴: Flexbox / Grid の直接の子要素に break-inside を当てても効かない場合があります。ブロック要素でラップしてください。

4. 背景色・背景画像を出力する

/* 特定要素の背景を強制出力 */
.highlighted {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  background-color: #fef9c3;
}

/* 全要素に一括適用 */
* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

FUNBREW PDF API では options.printBackground: true を指定するとデフォルトで背景が出力されます。

5. テーブルヘッダーを全ページで繰り返す

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

/* ヘッダー行内で改ページしない */
thead tr { break-inside: avoid; }

<thead> を HTML に明示的に書いていることが前提です。<tr> をそのまま <table> に並べると機能しません。

6. ページ番号・ヘッダー・フッター

/* CSS Paged Media によるページ番号 */
@page {
  @bottom-center {
    content: counter(page) " / " counter(pages);
    font-size: 10pt;
    color: #6b7280;
  }
}

/* ヘッダーにテキストを表示 */
@page {
  @top-center {
    content: "FUNBREW PDF — 社外秘";
    font-size: 9pt;
  }
}

注意: マージンボックス（@bottom-center 等）は Chrome 131 以降でサポートされています。FUNBREW PDF の quality エンジンは対応済みです。

7. @media print の基本パターン

/* 印刷 / PDF 出力時にのみ適用 */
@media print {
  /* ナビゲーション・サイドバーを非表示 */
  nav, aside, .no-print { display: none !important; }

  /* フォントを serif に切り替える */
  body { font-family: Georgia, serif; font-size: 11pt; }

  /* リンクのURLを本文後に表示 */
  a[href]::after { content: " (" attr(href) ")"; }

  /* 外部リンクのみURLを表示 */
  a[href^="http"]::after { content: " (" attr(href) ")"; }
}

8. 孤立行・遺残行を防ぐ

p {
  orphans: 3; /* ページ末尾の最小行数 */
  widows: 3;  /* ページ先頭の最小行数 */
}

9. 名前付きページ（異なるサイズを混在）

@page portrait-page  { size: A4 portrait; }
@page landscape-page { size: A4 landscape; }

.page-landscape {
  page: landscape-page;
  break-before: page;
}

10. よくある失敗パターンと対処法

症状 原因 対処法
背景色が消える デフォルトでインク節約モード print-color-adjust: exact を追加
改ページが効かない レガシー属性の未記載 page-break-* も一緒に書く
テーブルヘッダーが2ページ目以降に出ない <thead> がない HTMLに <thead> を明示する
@page の余白が効かない margin が HTML / body に設定されている body の margin: 0 をリセット
ページ番号が表示されない エンジンが Chromium 131 未満 quality エンジン（FUNBREW PDF）を使用
var() が @page 内で動かない Chromium の仕様 値をハードコードする
Flex の子要素で改ページ制御が効かない Flex コンテナの制約 ブロック要素でラップする

11. FUNBREW PDF API オプションとの対応表

CSS による制御と API オプションを組み合わせることで、より柔軟な出力が可能です。

目的 CSS API オプション
用紙サイズ @page { size: A4; } options.format: "A4"
余白 @page { margin: 20mm; } options.margin
背景色 print-color-adjust: exact options.printBackground: true
ページ番号 @page @bottom-center options.displayHeaderFooter
ヘッダー/フッター @page @top-center options.headerTemplate

API リファレンスの詳細はFUNBREW PDF ドキュメントを参照してください。

次のステップ

記事一覧に戻る
Powered by FUNBREW PDF