web-dev-qa-db-ja.com

HTMLページの印刷中のマージン

印刷用に別のスタイルシートを使用しています。印刷マージンを設定するスタイルシートで右マージンと左マージンを設定することは可能ですか？.

ありがとう。

htmlcssprintingstylesheet
118
kobra

印刷を指定するときは、cmまたはmmを単位として使用する必要があります。ピクセルを使用すると、ブラウザはそれを画面上の表示に似たものに変換します。 cmまたはmmを使用すると、用紙のサイズが一定になります。

body
{
  margin: 25mm 25mm 25mm 25mm;
}

フォントサイズについては、印刷メディアにptを使用します。

本体のマージンをcssスタイルで設定すると、notプリンターの印刷可能領域を定義するプリンタードライバーのマージン、またはマージン制御を調整することに注意してください。ブラウザによって（一部のブラウザの印刷プレビューで調整可能）...印刷可能領域内のドキュメントにマージンを設定します。

また、IE7 ++はサイズを自動的に最適なサイズに調整し、cmまたはmmを使用してもすべてが間違っていることに注意する必要があります。この動作をオーバーライドするには、ユーザーは「印刷プレビュー」を選択し、印刷サイズを100%（デフォルトはShrink To Fit）に設定する必要があります。

印刷された余白を完全に制御するためのより良いオプションは、@pageディレクティブを使用して用紙の余白を設定することです。これは、ブラウザーによって通常制御されるhtml body要素の外側の用紙の余白に影響します。 http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html を参照してください。
これは現在、Safariを除くすべての主要なブラウザーで動作します。
Internet Explorerでは、マージンは実際にこの印刷の設定でこの値に設定されます。プレビューを行うと、これがデフォルトとして取得されますが、ユーザーはプレビューで変更できます。

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
}

関連する回答： ページからブラウザの印刷オプション（ヘッダー、フッター、マージン）を無効にしますか？

211
awe

最初に言ったのは、他のブラウザは異なるレイアウトを作成するため、すべてのユーザーに印刷時にChromeを使用するよう強制することです。

この質問 からの回答：

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

ただし、印刷するすべてのページにこのCSSを使用することになりました。

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}


特殊なケース：長いテーブル

テーブルを複数のページに印刷する必要があるとき、margin:0を含む@pageがブリーディングエッジにつながりました。

bleeding edges

this answer のおかげでこれを解決できました：

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

さらに、@pageの上下のマージンを設定します。

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

結果：

solved bleeding edges

私は、簡潔ですべてのブラウザで機能するソリューションを希望します。今のところ、上記の情報が同様の問題を抱える一部の開発者に役立つことを願っています。

20
Kai Noack

個人的には、pxとは異なる測定単位を使用することをお勧めします。私は、ピクセルが印刷に関してあまり関連性があるとは思わない。理想的にはあなたが使用します：

  • ポイント（pt）
  • センチメートル（cm）

他にもきっとあるはずです。print-cssについてのすばらしい記事がここにあります： Going to Print 、by Eric Meyer 。

9
David Thomas

更新されたシンプルなソリューション

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

古いソリューション

各ページにセクションを作成し、以下のコードを使用して余白、高さ、幅を調整します。

A4サイズで印刷する場合。

その後、ユーザー

サイズ：8.27inおよび11.69インチ

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
}

次に、すべてのコンテンツを含むdivを作成します。

<div class="Section1"> 
    type your content here... 
</div>
9
Pir Abdul

より正確なので、cmまたはmmに対してptをお勧めします。また、Chrome（バージョン30.0.1599.69 m）で@pageを機能させることはできません。余白に設定した大小を無視します。しかし、ドキュメントの本文の余白で動作させることはできますが、奇妙です。

1
ironarm

ターゲットの用紙サイズがわかっている場合は、その特定のサイズのDIVにコンテンツを配置し、そのDIVにマージンを追加して印刷マージンをシミュレートできます。残念ながら、印刷ダイアログボックスを表示するだけでなく、印刷機能を特別に制御できるとは思わない。

0
jonjbar