CSS を使用してブラウザの印刷設定 (マージン、ヘッダー、フッター) を制御するにはどうすればよいですか?-CSSチュートリアル-php.cn

ブラウザの印刷設定の変更 (マージン、ヘッダー、フッター)

@page ディレクティブによるカスタマイズ

プリンターのマージンの設定

ブラウザ固有動作

コード例

制限事項と考慮事項

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS を使用してブラウザの印刷設定 (マージン、ヘッダー、フッター) を制御するにはどうすればよいですか?

Linda Hamilton

Dec 30, 2024 am 06:21 AM

How Can I Control Browser Print Settings (Margins, Headers, Footers) Using CSS?

ブラウザの印刷設定の変更 (マージン、ヘッダー、フッター)

ブラウザの印刷設定の変更というトピックに対処するために多くの試みが行われてきましたが、決定的な明確さは依然として得られていません。この記事では、最新の CSS 標準に基づいた包括的な説明とコード例を提供します。

@page ディレクティブによるカスタマイズ

CSS には @page ディレクティブが用意されており、印刷用のページ固有の書式設定を変更できます。メディア。このディレクティブを使用すると、開発者はプリンターのマージン、ページの方向、その他の設定を指定できます。

プリンターのマージンの設定

プリンターのマージンを設定するには、@page ディレクティブ内の margin プロパティを使用します。このプロパティはミリメートル単位の値をとり、プリンターのオプションパネルの余白設定に影響します。

注: @page プロパティのブラウザーの動作は異なる場合があります。たとえば、Safari はマージン設定をサポートしていませんが、他の主要なブラウザはサポートしています。

@page を使用してヘッダーとフッターを削除するには、次のようにマージンを設定します。

@page {
    margin: 0mm;
}

ログイン後にコピー

この手法は使用できない場合があります。ブラウザ固有のマージンが無効になっているため、印刷コンテンツが複数のページにまたがる場合に効果的です。

ブラウザ固有動作

@page ディレクティブを処理する際、ブラウザーによって異なる動作が示されます。内訳は次のとおりです:

Firefox 3.6 以前: @page margins は無視されます。
IE 7 以前: @page margins
Safari 5.1.7: @page 余白はサポートされていません。
Chrome 4.1: @page 余白は無視されます。
IE 8: @page のマージンは尊重されますが、ブラウザのヘッダーとフッターは尊重されませんhidden。
Opera 10: @page の余白は考慮されませんが、背景が不透明な場合、ブラウザのヘッダーとフッターは非表示になります。
Chrome 21以上: @page のマージンが尊重され、マージンがオーバーラップする場合、ブラウザのヘッダーとフッターは非表示になります。 content.

コード例

次の HTML および CSS コードは、@page ディレクティブを使用して印刷設定をカスタマイズする方法を示しています。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;
        margin: 0mm;
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm;
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

ログイン後にコピー

注: このコードは Chrome ではブラウザのヘッダーとフッターを非表示にしますが、他のものでは非表示にします