← カテゴリ一覧に戻る

印刷用スタイル

@media printpage-break@page

Webページを印刷する際、ナビゲーションや広告など画面向けのUI要素を非表示にし、コンテンツを読みやすくレイアウトを整えるための専用スタイルを記述できます。

デモ：印刷レイアウトのイメージ

画面表示

ナビゲーションバー
広告バナー

記事タイトル

本文コンテンツ。印刷時に残る部分です。

フッター（SNSボタン等）
→

印刷出力（@media print）

ナビ → display: none
広告 → display: none

記事タイトル

本文コンテンツ。印刷時に残る部分です。

フッター → display: none

コード例

/* 印刷時の基本設定 */
@media print {
  /* 不要な要素を非表示 */
  nav, header, footer, aside,
  .sidebar, .ads, .social-buttons {
    display: none !important;
  }

  /* 本文エリアを全幅に */
  .content {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* リンクのURLを表示 */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* 背景色・画像を印刷（ブラウザのデフォルトはOFF） */
  .highlight {
    print-color-adjust: exact; /* 背景色を強制印刷 */
    -webkit-print-color-adjust: exact;
  }
}

/* @page — 印刷ページ設定 */
@page {
  size: A4 portrait;  /* 用紙サイズと向き */
  margin: 20mm 15mm; /* 余白 */
}

/* 最初のページのみ余白を変える */
@page :first {
  margin-top: 30mm;
}

/* ページ送り制御 */
.chapter {
  break-before: page;  /* 前でページ区切り（新推奨） */
  /* page-break-before: always; 旧記法 */
}
.keep-together {
  break-inside: avoid;  /* 要素内でページ区切りしない */
}
.no-break-after {
  break-after: avoid;   /* 見出し後の改ページを防ぐ */
}

比較：page-break-* vs break-*（旧 vs 新）

意図旧プロパティ（非推奨）新プロパティ（推奨）
要素の前で改ページpage-break-before: alwaysbreak-before: page
要素の後で改ページpage-break-after: alwaysbreak-after: page
要素内での改ページ禁止page-break-inside: avoidbreak-inside: avoid
適用範囲印刷のみ印刷 + 段組（multi-column）
ブラウザサポート全ブラウザ（レガシー）全主要ブラウザ対応済み

break-* はCSS Fragmentation仕様の一部で、段組・印刷両方に対応しています。新規コードでは break-* を使いましょう。

印刷対応チェックリスト

  • ナビ・広告・SNSボタンなど画面専用UI要素に display: none を設定
  • コンテンツ幅を 100% にし、フォントサイズは 12pt 前後に
  • リンクに a[href]::after { content: attr(href) } でURLを表示
  • 背景色が必要な場合は print-color-adjust: exact を指定
  • 見出しの後で改ページしないよう break-after: avoid を設定
  • 表や画像が途中で切れないよう break-inside: avoid を使用

NEW@layer で印刷スタイルを整理（2022）/ print-color-adjust への改名（2022）

@layer を使うと印刷スタイルをカスケードレイヤーとして分離・管理できます。 また、背景色の強制印刷プロパティが color-adjust: exact から print-color-adjust: exact に改名されました。

/* @layer で印刷スタイルを整理 */
@layer base, components, print;

@layer print {
  @media print {
    nav, .sidebar { display: none; }
    .content { width: 100%; }
  }
}

/* print-color-adjust（旧: color-adjust）— 2022年改名 */
.badge {
  background: #ef4444;
  color: white;
  /* ブラウザが勝手に背景を消さないよう指定 */
  print-color-adjust: exact;          /* 標準（Chrome 107+, Firefox 97+） */
  -webkit-print-color-adjust: exact;  /* Safari向けベンダープレフィックス */
}

/* forced-colors との組み合わせ（ハイコントラストモード） */
@media print and (forced-colors: none) {
  .highlight { print-color-adjust: exact; }
}

Safari は現在も -webkit-print-color-adjust が必要なため、両方記述することを推奨します。

🤖 AIプロンプトテンプレート

CSSの印刷スタイル（@media print）を使った実装例をReact + Tailwind CSSで作成してください。

要件:
- 画面表示と印刷時の見た目の違いを並べて示すビジュアルデモ
- ナビゲーション・広告・フッターなど印刷不要な要素をdisplay: noneで隠すパターン
- @pageによる用紙サイズ・余白の設定（A4・portrait）の実装
- リンクに印刷時にURLを表示する（a[href]::after）のテクニック
- break-before / break-inside を使った改ページ制御（見出しの後で改ページしないなど）
- print-color-adjust: exact を使って背景色・画像を印刷に強制反映する実装

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo