WIING WebServiceCloudのWordPress用メディアブログテーマです。-WIING MEDIA

Web制作に関する自社オウンドメディア-WIING media

HOME 〉CSS 〉Webページ印刷が上手くいかない時のCSS

2019.11.01 Fri

Webページ印刷が上手くいかない時のCSS

CSS

Webページ印刷が上手くいかない時のCSS

Webページ印刷のCSS設定について

ホームページを印刷するときに、レイアウトが崩れたり、ページが余白部分まで印刷されたり、ページが切れてしまうことがあります。

基本的にはCSSで修正してうまく印刷できるようにします。
(IEはバグが多いので個別の対応が必要になるかもしれません。)

修正対応方法は2つだけです。


印刷用スタイルシート@media print

ブラウザで表示するcss記述では印刷ページを制御することができないので、印刷用のスタイルシートを用意します。
方法としては、既存のcssファイルに以下の印刷用のメディアクエリの記述を追加するか、別にCSSファイルを用意します。

  • 既存のCSSファイルに追加する場合
@media print{
/*ここに印刷用のセレクタを記述*/
}
  • 専用のCSSファイルを用意する場合

印刷時のみに有効になるスタイルシートを別途用意して、印刷用のセレクタを記述します。print.cssというファイルを新規作成して、ページヘッダ内に以下のlinkタグを追加します。

<link rel="stylesheet" href="print.css" media="print">

overflowの修正

用意したメディアクエリにブラウザ用のCSSにoverflow:hiddenを指定されている囲いタグがあれば、修正します。

例)

.wrap{
overflow:hidden;/*←hiddenが影響してはみだしたりする*/
}

[修正後]
.wrap{
overflow:visible;/*←属性値をvisibleにする*/
}
Webページ印刷調整は@media printとoverflow:visibleが基本です。

これで[用紙に合わせて縮小]で全体が見切れることなく印刷できようになります。

これでもレイアウトや見切れ、印刷バランスが良くない場合はさらに内部ページ横幅を指定しているタグを1000pxなど固定幅で指定して、はみ出す場合は該当箇所を逆にoverflow:hidden;にすることで、はみ出し部分をなくしてバランス調整ができます。

display:flexなどの2カラムセレクタはdisplay:tableと子要素をdisplay:table-cellで指定することで上下の余白を消すことができます。
改ページのpage-break-before: avoid;などはうまく反映されませんでした。

掲載情報につきましては当社が独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。