検索
ホームページウェブフロントエンドCSSチュートリアル「window.print()」を使用するときに不要なヘッダーとフッターを削除するにはどうすればよいですか?

How to Eliminate Unwanted Headers and Footers When Using `window.print()`?

window.print() でヘッダーとフッターを非表示にする方法

Web ページを印刷するために window.print() を呼び出すと、不要なヘッダーが表示されます。フッターが表示され、ページ タイトル、ファイル パス、ページ番号、日付が表示される場合があります。このガイドでは、これらの追加要素を削除する方法を説明します。

解決策:

Chrome では、CSS ルール @page を利用して自動ヘッダーとフッターを非表示にします:

@page {
  margin: 0;
}

コンテンツがページの境界まで拡張されると、印刷ヘッダーとフッターが冗​​長になります。ただし、コンテンツがページの端を超えて拡大しないように、body 要素には必ずマージンまたはパディングを指定してください。通常、プリンタは余白なし印刷をサポートしていないため、次の点を考慮してください:

@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1.6cm;
  }
}

ただし、コンテンツが複数のページにまたがる場合、余白が不均一なために印刷レイアウトが歪んで見える場合があります。最初のページには 1.6cm の上余白があり、最後のページには 1.6cm の下余白があり、中間ページには余白がなくなります。

この解決策は、この記事の執筆時点 (5 月) では Chrome で有効でしたが、 2013)、他のブラウザ間の互換性は変動しています。他のブラウザのサポートが必要な場合は、PDF を動的に生成し、代わりにそれを印刷することを検討してください。

以上が「window.print()」を使用するときに不要なヘッダーとフッターを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
軌道力学(またはCSSキーフレームアニメーションの最適化方法)軌道力学(またはCSSキーフレームアニメーションの最適化方法)May 09, 2025 am 09:57 AM

独自のコードをリファクタリングするのはどのように見えますか?ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

CSSアニメーション:それらを作成するのは難しいですか?CSSアニメーション:それらを作成するのは難しいですか?May 09, 2025 am 12:03 AM

cssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1)

@KeyFrames CSS:最も使用されているトリック@KeyFrames CSS:最も使用されているトリックMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude:1)defingsmoothtransitionsbetweenstates、2)AnimatingMultipleProperiessimally、3)3)bendorprefixesforbrows -compativity、4)組み合わせwithjavasfo

CSSカウンター:自動番号の包括的なガイドCSSカウンター:自動番号の包括的なガイドMay 07, 2025 pm 03:45 PM

csScounterSareSareusedTomageautomaticinginginwebdesigns.1)それらは、コンテンツ、リスト、および積極的なものを使用することができます

スクロール駆動型のアニメーションを使用したモダンなスクロールシャドウスクロール駆動型のアニメーションを使用したモダンなスクロールシャドウMay 07, 2025 am 10:34 AM

特にモバイルデバイスでは、スクロールシャドウを使用することは、Chrisが以前にカバーした微妙なUXです。 Geoffは、アニメーションタイムラインプロパティを使用する新しいアプローチをカバーしました。これがさらに別の方法です。

画像マップを再検討します画像マップを再検討しますMay 07, 2025 am 09:40 AM

簡単に復習してみましょう。画像マップはHTML 3.2に戻ります。ここで、最初にサーバー側マップを使用してから、マップとエリア要素を使用して画像上でクリック可能な領域を定義したクライアント側マップをマップしました。

開発者:すべての開発者の調査開発者:すべての開発者の調査May 07, 2025 am 09:30 AM

State of Devsの調査は現在、参加に対して開かれており、以前の調査とは異なり、コードを除くすべてをカバーしています:キャリア、職場だけでなく、健康、趣味などもあります。 

CSSグリッドとは何ですか?CSSグリッドとは何ですか?Apr 30, 2025 pm 03:21 PM

CSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、