print-css

印刷用 CSS

印刷用スタイルシートのスペシャリストです。ウェブページで Cmd+P を押しただけのようではなく、紙面上で意図どおりに見える @media print スタイルを作成します。

このスキルを使う場面

• ユーザーから「印刷できるようにして」または「印刷用スタイルを追加して」と依頼されたとき
• 印刷するページ（招待状、チケット、レポート、請求書など）を作成するとき
• ウェブページの「PDF として保存」版を作成するとき
• 印刷レイアウトの崩れを修正するとき

印刷用スタイルシートのひな形

印刷用スタイルシートはすべて、次の順序で構成します。

@media print {
  /* 1. Page setup */
  @page { size: letter; margin: 0.5in 0.6in; }

  /* 2. Force color reproduction */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 3. Base typography */
  body {
    background: white !important;
    color: #1a1a1a !important;
    font-size: 10.5pt;
    line-height: 1.6;
  }

  /* 4. Kill web-only elements */
  nav, .no-print, footer, .cookie-banner { display: none !important; }

  /* 5. Kill animations */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  /* 6. Flatten layouts */
  /* ... framework-specific resets ... */

  /* 7. Page break control */
  h1, h2, h3 { page-break-after: avoid; break-after: avoid-page; }
  tr, img, blockquote { page-break-inside: avoid; break-inside: avoid-page; }
  p { orphans: 3; widows: 3; }

  /* 8. Images */
  img { max-width: 100%; max-height: 3in; }

  /* 9. Links */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  a[href^="#"]::after { content: ""; }

  /* 10. Tables */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
}

---

@page ルール

@page {
  size: letter;            /* or: A4, 210mm 297mm, landscape */
  margin: 0.5in 0.6in;    /* top/bottom  left/right */
}

@page :first {
  margin-top: 1in;        /* extra space for cover page */
}

使用できるサイズ： letter（8.5x11in）、A4（210x297mm）、A3、A5、legal、または任意の寸法です。

注意点：

• @page の余白指定は、ブラウザー間でのサポートが限定的です。代替手段として body またはラッパーに padding を指定してください。
• DevTools の印刷エミュレーションでは @page の効果は確認できません。実際の印刷プレビュー（Cmd+P）で確認してください。
• ページレベルで background-color を確実に設定することはできません。

---

ページ分割の制御

ブラウザーのサポートを最大限にするため、旧式と新しいプロパティの両方を使用します。

/* Prevent breaking inside an element */
.card, tr, figure {
  page-break-inside: avoid;
  break-inside: avoid-page;
}

/* Force a break before a section */
.chapter {
  page-break-before: always;
  break-before: page;
}

/* Prevent a break right after a heading */
h1, h2, h3 {
  page-break-after: avoid;
  break-after: avoid-page;
}

孤立行とウィドウ行

ページ境界で行が取り残されないようにします。

p {
  orphans: 3;   /* minimum lines at bottom of page */
  widows: 3;    /* minimum lines at top of next page */
}

注意点：

• page-break-inside: avoid は flex または grid コンテナーでは安定して動作しません。印刷時は display: block に切り替えてください。
• break-inside: avoid を使いすぎると、コンテンツが予期せず次のページに送られることがあります。
• 実際のコンテンツでテストしてください。短い段落と長い段落では挙動が異なります。

---

表示

印刷時に常に非表示にする要素

@media print {
  nav,
  .sidebar,
  .cookie-banner,
  .social-share,
  .comments,
  .ads,
  .chat-widget,
  .search-bar,
  .no-print {
    display: none !important;
  }
}

印刷時のみ表示する要素

.print-only {
  display: none;  /* hidden on screen */
}

@media print {
  .print-only {
    display: block;  /* visible on paper */
  }
}

visibility: hidden ではなく display: none !important を使用します。visibility はレイアウト上のスペースを保持するため、紙を無駄にします。

---

色と背景

print-color-adjust

ブラウザーが印刷用に色を最適化できるかどうかを制御します。

* {
  -webkit-print-color-adjust: exact !important;  /* Safari/older Chrome */
  print-color-adjust: exact !important;           /* standard */
}

• exact -- 指定した色を維持します（インクを多く消費する場合でも）。
• economy（デフォルト）-- ブラウザーが背景を削除したり、色を調整したりすることがあります。

印刷用の色の置き換え

ウェブの色を印刷に適した色に置き換えます。

@media print {
  body {
    background: white !important;
    color: #1a1a1a !important;
  }

  /* Vibrant accent becomes muted for paper */
  .text-coral { color: #A03030 !important; }

  /* Dark backgrounds become white with borders */
  .dark-card {
    background: white !important;
    border: 1px solid #ccc !important;
  }
}

目安： 白い紙の上で腕の長さほど離れても読みやすければ、問題ありません。

---

タイポグラフィ

ピクセルではなくポイントを使用する

ポイントはブラウザーやプリンターを問わず、一貫して表示されます。

@media print {
  body {
    font-size: 10.5pt;
    line-height: 1.6;
  }
  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }
  code { font-size: 9pt; }
}

印刷用のフォントスタック

セリフ体フォントは紙面で読みやすくなります。

@media print {
  body { font-family: Georgia, 'Times New Roman', serif; }
  code, pre { font-family: 'Courier New', monospace; }
}

注意点：

• カスタムウェブフォントは印刷時に読み込まれないことがあります。必ず serif/sans-serif のフォールバックを指定してください。
• 細いフォントウェイト（300、200）は削除してください。紙面では細い線がきれいに表示されません。
• text-shadow は削除してください。印刷には反映されません。
• 本文の最小可読サイズは 9pt です。10-11pt を推奨します。

---

画像

@media print {
  img {
    max-width: 100%;
    max-height: 3in;      /* prevent full-page images */
  }

  /* Hide decorative images */
  .hero-image,
  .background-image,
  .decorative {
    display: none !important;
  }

  /* Remove gradient overlays that hide content */
  [class*="bg-gradient"][class*="absolute"] {
    display: none !important;
  }
}

注意点：

• 背景画像はデフォルトでは印刷されません。print-color-adjust: exact を使うか、コンテンツを <img> タグに移してください。
• srcset を使用したレスポンシブ画像は、印刷プレビューで正しく読み込まれないことがあります。
• 高解像度画像は PDF の生成速度を大幅に低下させます。

---

リンク

印刷したリンクに URL を表示する

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Don't show URLs on anchor links */
  a[href^="#"]::after { content: ""; }

  /* Don't show URLs on links that already describe their destination */
  a.no-print-url::after { content: ""; }
}

注意点： attr(href) は完全な URL を表示するため、非常に長くなることがあります。::after 擬似要素に max-width と overflow: hidden を指定して切り詰めるか、リンク先が既知の場合はコンテンツをカスタマイズしてください。

---

テーブル

@media print {
  /* Repeat header on each page */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }

  /* Prevent row splitting */
  tr {
    page-break-inside: avoid;
    break-inside: avoid-page;
  }

  /* Ensure borders print */
  table { border-collapse: collapse; width: 100%; }
  th, td {
    border: 1px solid #000;
    padding: 4pt 6pt;
  }
}

---

フレームワークに関する注意点

Next.js

fill を指定した next/image は印刷時に崩れます：

@media print {
  /* next/image fill uses absolute positioning -- force to static */
  [data-nimg="fill"],
  img[style*="position: absolute"] {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Fix fill containers */
  [style*="position: relative"] {
    position: relative !important;
    overflow: visible !important;
  }
}

印刷用スタイルの配置場所： コンポーネントスコープのスタイルではなく、globals.css に @media print を記述してください。印刷用スタイルであらゆるスタイルを上書きするには、グローバルスコープが必要です。

関連する議論： vercel/next.js#23039

React / CSS-in-JS

• 印刷メディアクエリーは、コンポーネントのスタイルまたはグローバルスタイルシートに含める必要があります。
• Styled-components と Emotion は通常どおり @media print ブロックをサポートします。
• 動的なクラス名も問題なく機能します。印刷用スタイルは詳細度によって上書きできます。

Tailwind CSS

@media print {
  /* Kill viewport height constraints */
  .min-h-screen, .min-h-svh, .h-screen { min-height: auto !important; height: auto !important; }

  /* Dark mode on paper = unreadable */
  .dark { background: white !important; color: #1a1a1a !important; }

  /* Opacity renders poorly on paper */
  [class*="opacity-"] { opacity: 1 !important; }

  /* Fixed elements don't print */
  .fixed { position: static !important; }

  /* Overflow hidden clips content at page breaks */
  .overflow-hidden { overflow: visible !important; }
}

Flexbox と Grid

Flex および grid コンテナーは、ページ分割を正しく処理できません。フラット化してください。

@media print {
  .flex, .grid { display: block !important; }

  /* Or selectively: keep horizontal flex but allow breaking */
  .flex-col { display: block !important; }
}

例外： ナビゲーション項目やボタングループなど、短い flex 行は、1 行に収まり page-break-inside: avoid を使用する場合、そのまま flex にできます。

---

テスト

DevTools エミュレーション（すばやい反復）

1. DevTools を開きます（F12）
2. 三点メニュー -> その他のツール -> レンダリング
3. 「CSS メディアタイプをエミュレート」 -> print
4. スタイルがリアルタイムで更新されます

制限事項： ページ区切り、@page ルール、PDF のヘッダー／フッターは表示されません。

実際の印刷プレビュー（最終確認）

1. Cmd+P（Mac） / Ctrl+P（Windows）
2. 色や画像を表示するには、「背景のグラフィック」をオンにします
3. ページ区切り、余白、レイアウトを確認します

チェックリスト

印刷スタイルが完成したと判断する前に、次の点を確認してください。

• Web 専用の要素（ナビゲーション、広告、ウィジェット）が非表示になっている
• ページ区切りによってカード、テーブルの行、画像の途中で分割されない
• ページの上下に孤立した単独の行が残らない
• すべてのテキストが読みやすい（最小 9pt、白地に濃い文字色）
• 画像が次のページにはみ出さない
• リンクに URL が表示される（またはテキストとして明確にスタイル設定されている）
• テーブルのヘッダーが各ページで繰り返し表示される
• 背景が非表示になっているか、print-color-adjust で強制表示される
• アニメーションやトランジションが残っていない
• Flexbox／grid のレイアウトによって空白ページが発生しない
• min-height: 100vh の制約が解除されている
• 固定配置が static に変更されている
• DevTools のエミュレーションだけでなく、実際の印刷プレビューでテスト済みである

---

エージェント型ワークフローとバイブコーディング

• 反復的なスタイル調整： 印刷レンダリングエンジンは扱いにくいため、最初から完璧な印刷レイアウトになるとは考えないでください。V1 のスタイルシートを作成し、結果をプレビューして、特定の区切りや表示上の問題を切り分け、CSS ルールを一度に 1 つだけ正確に調整して、レイアウトが安定するまで再テストします。
• バイブコーディング： 複雑な grid／flexbox の単純化やブラウザー間の印刷表示の差異に取り組む前に、作業中の CSS の変更をローカルでコミットしてください。

ユーティリティクラス

印刷を制御するために、これらをプロジェクトに追加します。

.no-print { }              /* hidden in print via @media print */
.print-only { display: none; }  /* hidden on screen, shown in print */
.print-break-before { }    /* page break before this element */
.print-break-after { }     /* page break after this element */
.no-print-url { }          /* suppress URL display on this link */

@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  .print-break-before { page-break-before: always !important; break-before: page !important; }
  .print-break-after { page-break-after: always !important; break-after: page !important; }
}