1. ホーム
  2. html

[解決済み] htmlページ印刷時の余白について

2022-04-25 06:52:40

質問

印刷用に別のスタイルシートを使用しています。

印刷時の余白を設定するスタイルシートで、左右の余白を設定することは可能でしょうか?(紙面上の余白など)

解決方法を教えてください。

を使用する必要があります。 cm または mm を印刷用に指定する場合、単位にします。ピクセルを使うと、ブラウザが画面上での見え方に近いものに変換してくれます。使用方法 cm または mm を使用すると、用紙上で一定の大きさを確保することができます。

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

フォントサイズについては pt を印刷媒体に使用します。

なお、css styleでbodyにmarginを設定すると ではなく プリンタドライバの印刷可能領域を定義するマージンや、ブラウザで制御されるマージン(ブラウザによっては印刷プレビューで調整できる場合もあります)を調整します。印刷可能な領域内のドキュメントにマージンを設定するだけです。

また、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;  
} 

関連する回答 ブラウザの印刷オプション(ヘッダー、フッター、マージン)をページから無効にする?