Webページを 印刷用に最適化 する際、横幅をA4用紙サイズの100%に設定したい と思ったことはありませんか？
通常、Webページのスタイリングには width: 100% を使用しますが、印刷時に用紙サイズに合わせるには、CSSの @page ルールを活用するのが最適です。
本記事では、CSSの @page ルールを使って横幅を用紙サイズの100%に設定する方法 を詳しく解説します。特に A4サイズ（縦向き） の場合に 余白なしでページ全体をカバーする 方法を紹介します。
@page ルールとは？
CSSの @page ルールは、印刷時のページサイズや余白などを指定できる CSSの特別なルール です。
例えば、以下のように記述することで、A4サイズ（縦向き）
|
1 2 3 4 |
@page { size: A4 portrait; /* A4サイズ・縦向き */ margin: 0; /* 余白をなくす */ } |
@page ルールの主なプロパティ
- size 用紙サイズを指定（A4, A3, letter など）
- margin 用紙の余白を指定（デフォルトは1インチ）
A4サイズの横幅を100%に設定する方法
@page でA4のサイズを指定
まず、印刷時にA4サイズ（縦向き）でページを作成するために、
|
1 2 3 4 |
@page { size: A4 portrait; /* A4サイズ（縦向き） */ margin: 0; /* 余白をゼロに */ } |
この設定を行うことで、印刷時にA4サイズの用紙が使用され、
横幅を用紙サイズの100%にする
次に、body や特定の div 要素の横幅を用紙のサイズいっぱいに設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
body { width: 100%; height: 100%; margin: 0; padding: 0; } .print-container { width: 100%; height: 100vh; /* 画面の高さを全体にする */ background-color: lightgray; /* 背景色を設定（デバッグ用） */ } |
ポイント
- width: 100% にすることで、ページの横幅を用紙サイズに合わせる
- margin: 0; padding: 0; を設定し、不要な余白をなくす
- height: 100vh; を指定すると、1ページ分の高さが確保される
- 3. 印刷時のみ適用する @media print を使う
- 印刷時にのみ適用されるスタイルを @media print で指定できます。
|
1 2 3 4 5 6 7 8 9 10 |
@media print { body { background-color: white; /* 印刷用に背景色を白に */ } .print-container { width: 100%; height: 100vh; background-color: white; } } |
@media print を使うことで、
実際のHTML & CSSサンプル
以下のコードをブラウザで開き、印刷プレビュー（Ctrl + P / Command + P） で確認してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>印刷用レイアウト</title> <style> @page { size: A4 portrait; /* A4サイズ・縦向き */ margin: 0; /* 余白をゼロに */ } body { margin: 0; padding: 0; } .print-container { width: 100%; height: 100vh; background-color: lightgray; display: flex; align-items: center; justify-content: center; font-size: 24px; } @media print { .print-container { background-<wbr />color: white; } } </style> </head> <body> <div class="print-container"> A4サイズの100%幅で表示される印刷用ページ </div> </body> </html> |
このコードの動作
- ブラウザで開くと、グレーの背景で「A4サイズの100%
幅で表示される印刷用ページ」が中央に表示される - 印刷プレビューを開くと、
A4サイズで余白なしのレイアウトが確認できる - 実際に印刷すると、
ページいっぱいにコンテンツが表示される
余白をゼロにする重要性
デフォルトでは、ブラウザが印刷時に余白を自動で追加する ことがあります。
そのため、@page { margin: 0; } を適用することで、ページ全体を100%
A4サイズの100%幅を設定するメリット
- チラシやポスターをWebページから直接印刷できる
- 余白のないフルスクリーンレイアウトを実現
- CSSだけで簡単に印刷レイアウトを調整可能
横向き（ランドスケープ）で設定するには？
A4の横向き（ランドスケープ）にする場合は、次のように landscape を指定します。
|
1 2 3 4 |
@page { size: A4 landscape; margin: 0; } |
印刷時にページ全体がはみ出してしまう場合は？
ブラウザの印刷設定で「余白なし」 を選ぶと、意図したとおりに印刷できます。
また、次のように box-sizing: border-box; を追加すると、はみ出しを防げます。
|
1 2 3 |
body, .print-container { box-sizing: border-box; } |
まとめ
CSSの @page ルールを活用することで、
特に margin: 0; を設定することで、横幅100%
- @page { size: A4 portrait; margin: 0; } を使えば、A4サイズの余白なし設定ができる！
- width: 100% を適用すれば、用紙幅いっぱいにコンテンツを広げられる！
- @media print で、印刷時のレイアウト調整も簡単！
A4サイズで横幅を100%にしたいときは、
コメント