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 ディレクティブを使用して印刷設定をカスタマイズする方法を示しています。

    <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>


  <div>Top line</div>
  <div>Line 2</div>

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

制限事項と考慮事項

ブラウザの印刷設定を動的に変更することは、すべてのブラウザで一貫してサポートされていない可能性があります。一部のブラウザーはカスタム設定をオーバーライドする場合があり、使用される特定のプリンターによって結果が異なる場合があります。

以上がCSS を使用してブラウザの印刷設定 (マージン、ヘッダー、フッター) を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。