長崎県長崎市のホームページ制作・作成会社 フロートワークス

  • ホーム
  • 会社案内
  • 制作事例
  • 制作プラン/料金
  • お問い合わせ

2012年 3月 9日

WEBページの印刷プレビューが表示されない不具合の対処

Internet Explorer及びFirefox双方のブラウザでWEBページを印刷プレビューしたときに、内部コンテンツの表示がページごと消えてしまったり、一部表示されない部分があったので、その時に対処した方法を忘れないようにメモしておきます。

印刷プレビュー不具合ページでは、CSS(スタイルシート)にfloatで回りこみ設定をしている箇所が多く、どうやらこの“float設定”が“悪さ”をしているみたい(テーブルで組んであるページは印刷プレビューが正常だった為)だと最終的に判断し、以下の対処を行いました。

1.画面表示用のCSSと印刷用のCSSを用意しヘッダに設定。

※印刷用のCSSは、style.cssをそのままコピペで複製し、print.cssに名前を変更。

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen”>
<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print”>

※各々のCSSには以下のソースを追加する。(赤色追加ソースで挟む)
【画面表示用CSS にソース追加】
@media screen {
/* 画面表示用CSSの内容 */
}

【印刷用CSSにソース追加】
@media print{

/* 印刷用CSSの内容 */
}

2.印刷用CSS(print.css)の修正。

floatで横並びにするとレイアウトが崩れる場合があるようで、それが印刷プレビューにも影響しているようです。原因の詳細は参考にさせてもらったウェブピボさんの「floatを使わずにinline-blockで横並びにする方法」を御覧ください。

上記を踏まえ、印刷プレビューに不具合を与えていそうなprint.cssのfloatを削除し、削除した部分にウェブピボさんが書かれていた以下のソースを追加してみました。

【修正前】
.sample {
    float: left;
}
【修正後】
.sample {
    display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5~7*/
    /zoom: 1; /*for ie5~7*/
}

最終的にInternet Explorerではページによっては一部欠けもあったりするのですが、Firefoxでは問題なく画面表示そのままに印刷プレビューすることができました。印刷プレビューの不具合もケースバイケースだと思いますが、最初にfloat部分を疑ってみるのが一番解決は早いのではないかと思います。 以上。

ホームページ制作 長崎|フロートワークス > ブログ > WEBページの印刷プレビューが表示されない不具合の対処

    更新情報

    • 【最新】冬期休業のお知らせ 2024ー2025
    • お盆休業のお知らせ 2024
    • 冬季休業のお知らせ 2022ー2023
    • お問い合わせフォームによる受付を停止いたしました。
    • 冬季休業のお知らせ 2021ー2022
    • 冬季休業のお知らせ 2019ー2020
    • 年末年始休業のご案内 2018-2019
    • 冬季休業のお知らせ 2017ー2018
    • 年末年始のお知らせ
    • 固定電話回線を解約します。(追記あり)
    • 冬季休業のお知らせ 【2015年12月30日〜2016年1月4日】
    • 2015年4月現在、新規ホームページ制作 受注停止中です。
    • 冬季休業(休暇)のお知らせ
    • 現在、新規ホームページ制作 受注停止中です。
    • フロートワークス 夏季休暇について

    カテゴリー

    • お知らせ
    • ブログ

    最近の投稿

    • 【最新】冬期休業のお知らせ 2024ー2025
    • お盆休業のお知らせ 2024
    • 冬季休業のお知らせ 2022ー2023
    • お問い合わせフォームによる受付を停止いたしました。