CSS印刷スタイルジェネレーターとは
印刷スタイルシートは、@media print内に記述するCSSで、ページを印刷したりPDFとして保存したりするときのスタイルを設定します。ナビゲーション、サイドバー、フッターを非表示にし、リンクの後に完全なURLを表示し、テーブルやコードなどの重要なブロック内での改ページを防ぎ、適切なマージンを設定する必要があります。これはドキュメント、レシピ、請求書、記事に特に便利です。
クイックアンサー
ナビゲーションを非表示にし、リンクURLを表示し、改ページを制御し、適切な印刷マージンを設定する@media printブロックを生成します。記事、レシピ、ドキュメント、請求書をクリーンに印刷するために不可欠です。
Last updated: 2026-06-11
制限事項
- page-break-inside: avoidなどの改ページルールはブラウザの印刷エンジンへのヒントであり、保証ではありません。ブロックが1ページに収まらない場合、エンジンはコンテンツを分割することがあります。
- ブラウザの印刷エンジンはCSSのレンダリング方法が異なります。Chrome、Firefox、Safariはそれぞれ、背景色、ページマージン、マルチカラムレイアウトなどで微妙に異なる印刷出力を生成します。
- 印刷スタイルルールは、ページが印刷されるか印刷プレビューで表示されたときにのみ適用されます。画面メディアが有効なブラウザDevToolsでの変更は印刷スタイル効果を表示しません。常に印刷プレビューまたはDevToolsのRenderingパネルで印刷メディアタイプを選択してテストしてください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 印刷時に非表示にする要素を選択します。
- リンクの後にURLを表示するかどうかを選択します。
- マージンとページサイズの設定を選択します。
- @media printブロックをスタイルシートにコピーし、印刷プレビューでテストします。
主な用途
- ナビゲーションや広告なしでクリーンに印刷できるレシピページを準備する。
- 参照用に完全なリンクURLを印刷表示するドキュメントページを作成する。
- プロフェッショナルな印刷出力用に請求書やチェックリストをスタイリングする。