2022.09.07Webページ印刷が上手くいかない時のCSSCSSWebページ印刷のCSS設定についてホームページを印刷するときに、レイアウトが崩れたり、ページが余白部分まで印刷されたり、ページが切れてしまうことがあります。ホームページを上手に印刷するには基本的にCSSで修正してうまく印刷できるようにします。(IEは比較的にバグが多いので個別の対応が必要になるかもしれません。)修正対応方法は2つだけです。printブラウザで表示するcss記述では印刷ページを制御することができないので、印刷用のスタイルシートを用意します。方法としては、既存のcssファイルに以下の印刷用のメディアクエリの記述を追加するか、別にCSSファイルを用意します。印刷時のみに有効になるスタイルシートを別途用意して、印刷用のセレクタを記述します。print.cssというファイルを新規作成して、ページヘッダ内に以下のlinkタグを追加します。用意したメディアクエリにブラウザ用のCSSにoverflow:hiddenを指定されている囲いタグがあれば、修正します。printとoverflow:visibleが基本です。これで[用紙に合わせて縮小]で全体が見切れることなく印刷できようになります。これでもレイアウトや見切れ、印刷バランスが良くない場合はさらに内部ページ横幅を指定しているタグを1000pxなど固定幅で指定して、はみ出す場合は該当箇所を逆にoverflow:hidden;にすることで、はみ出し部分をなくしてバランス調整ができます。display:flexなどの2カラムセレクタはdisplay:tableと子要素をdisplay:table-cellで指定することで上下の余白を消すことができます。小規模での信頼性の高いデータ集計や事前のテストマーケティングに最適な小規模市場調査サービス。商品の安心感を向上させて転換率/CVRをしっかり上げるバナーとYouTubeサムネイル制作サービス。補足情報として印刷範囲のプレビューなどの前の段階、そもそもホームページの印刷ができない状態でチェックしておくべき項目を記載しておきます。Webページ印刷自体ができないときチェックすることプリンターの電源は入っているかプリンターとパソコンは正しく接続されているかプリンターの紙詰まりなど警告は表示されていないかブラウザから印刷するときにプリンター一覧にプリンターの名前はあるかプリンターのドライバーは正しくインストールされているかテスト印刷はできているか主に上の内容をチェックすれば、ホームページ印刷ができない原因が判明します。大切な切り分け方は、2つだけです。これまで印刷できていたかはじめて印刷するかはじめての場合はプリンターの説明書をみながらテスト印刷まで行います。これまでできていて急にできなくなった場合は、一旦すべての機器を再起動して、上述したチェックすることをひとつづ確認していきます。印刷トラブルは原因が一つのみなので、あれこれ設定やドライバーファイルを操作するよりも、ひとつづつ段階を追って原因を切り分けておくことが推奨されます。Webページ印刷できない時に注意したいことホームページ印刷が必要な時に、急に印刷ができない場合などはとても焦るシチュエーションがありますが、ネット検索するとドライバーを最新のものに入れ直すという情報がすごく多いです。入れ直しても症状は改善しません。いうよりも、基本的にドライバーは一度インストールされていれば、不具合などがない限り更新や再インストールなどはあまり効果がありません。しても急いでいる場合は、USBフラッシュメモリなどにホームページのスクリーンショット画像を保存して、コンビニなどでカラーコピーするほうが早い場合があります。プリンター自体が破損していたり、ケーブル類が断線している場合などは、すぐに復旧が難しいですから、応急処置方法をいくつか用意しておくと、いざという時にあまり困らなくて済むケースが多いようです。プリンタートラブルの原因はほぼ1つ診断チェックツール5診断チェックツール5は5問、5診断結果までの診断チェックをオンラインでチェックできるWebツールです。詳細-診断チェックツール5次のページ掲載情報につきましては当社が独自に調査、検証および収集した情報です。情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。掲載情報の修正・変更等をご希望の場合はお知らせください。MEDIAを使用した企業メディアです。流動的に更新しています。合同会社の企業メディアブログです。Web制作オンライン学習と企業ネットコンサルティングのための学び方、製品やサービス紹介、ビジネス系のさまざまな記事を更新しています。HOMEWeb制作WordPressCREATEWebハックWebツールブラウザ上で動作する便利なWebツールです。