@media printで印刷用スタイルシート
@media printを使用して印刷最適化スタイルシートを作成。ナビゲーション、背景、不要な要素を削除してクリーンな印刷ページを実現。
Output & Display
詳細な説明
印刷スタイルシートの作成
@media printクエリは、ページが印刷されるか PDFとして保存されるときのみスタイルを適用します。
クエリ
@media print {
/* 印刷専用スタイル */
}
必須の印刷オーバーライド
- 不要な要素を非表示（nav、footer、サイドバー、広告、ボタン）
- 背景と色をリセット
- リンクのURLを表示
- 要素の改ページを防止
- テキストを読みやすくする
テスト方法
Chrome DevToolsでRenderingパネルを開き、「Emulate CSS media type」を「print」に設定すると、実際に印刷せずに印刷スタイルを確認できます。
ユースケース
ブログ、ドキュメント、記事、請求書など、ユーザーがページを印刷またはPDFとして保存する可能性のあるコンテンツ中心のWebサイトでこのクエリを使用してください。