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

Web制作オンライン学習と企業ネットコンサルティング-WIING MEDIA

  • twitter WIING WebServiceCloud
  • Instagram WIING WebServiceCloud
  • facebook WIING WebServiceCloud
  • note WIING WebServiceCloud
  • WIING media ログイン
HOME 〉CSS 〉Webページ印刷が上手くいかない時のCSS

2019.11.01 Fri  2022.09.07

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;などはうまく反映されませんでした。

  • 小規模市場調査「Seebe(シービー)」

    小規模での信頼性の高いデータ集計や事前のテストマーケティングに最適な小規模市場調査サービス。
  • バナー制作・YouTubeサムネイル制作「バナリズム」

    商品の安心感を向上させて転換率/CVRをしっかり上げるバナーとYouTubeサムネイル制作サービス。

    バナリズム公式サイト

ホームページ印刷ができないときの対処方法

補足情報として印刷範囲のプレビューなどの前の段階、そもそもホームページの印刷ができない状態でチェックしておくべき項目を記載しておきます。

Webページ印刷自体ができないときチェックすること

  • プリンターの電源は入っているか
  • プリンターとパソコンは正しく接続されているか
  • プリンターの紙詰まりなど警告は表示されていないか
  • ブラウザから印刷するときにプリンター一覧にプリンターの名前はあるか
  • プリンターのドライバーは正しくインストールされているか
  • テスト印刷はできているか

主に上の内容をチェックすれば、ホームページ印刷ができない原因が判明します。

大切な切り分け方は、2つだけです。

  • これまで印刷できていたか
  • はじめて印刷するか

はじめての場合はプリンターの説明書をみながらテスト印刷まで行います。
これまでできていて急にできなくなった場合は、一旦すべての機器を再起動して、上述したチェックすることをひとつづ確認していきます。 おおよその印刷トラブルは原因が一つのみなので、あれこれ設定やドライバーファイルを操作するよりも、ひとつづつ段階を追って原因を切り分けておくことが推奨されます。

Webページ印刷できない時に注意したいこと

ホームページ印刷が必要な時に、急に印刷ができない場合などはとても焦るシチュエーションがありますが、ネット検索すると
  • ドライバーを最新のものに入れ直す
という情報がすごく多いです。
大抵は入れ直しても症状は改善しません

というよりも、基本的にドライバーは一度インストールされていれば、不具合などがない限り更新や再インストールなどはあまり効果がありません。

どうしても急いでいる場合は、USBフラッシュメモリなどにホームページのスクリーンショット画像を保存して、コンビニなどでカラーコピーするほうが早い場合があります。

プリンター自体が破損していたり、ケーブル類が断線している場合などは、すぐに復旧が難しいですから、応急処置方法をいくつか用意しておくと、いざという時にあまり困らなくて済むケースが多いようです。

プリンタートラブルの原因はほぼ1つ
  • 診断チェックツール5
  • 診断チェックツール5

    診断チェックツール5は5問、5診断結果までの診断チェックをオンラインでチェックできるWebツールです。

WIING MEDIA twitter

WIING MEDIA facebook

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

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

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