コーディングメソドロジー

第17回 ブラウザからの印刷対応

Webブラウザは、その名の通り「ブラウズ」=「(画面上で)閲覧する」という目的がそもそもの成り立ちであることもあり、画面上の表示よりも、印刷において、正しく表示されないことが多いと感じたことがあるのではないでしょうか。Webサイトをコーディングするに当たって、見逃しがちですがはずせない印刷対応についてお伝えいたします。

IE6での印刷トラブル①-横幅がA4に納まらない

IE6の印刷トラブル

少し前まで、Webページの横幅は、800x600pxの画面に合わせて750px程度が主流でしたが、解像度の高いモニターの普及もあり、最近では900pxや1000pxを超える横幅のサイトが多くなってきました。その反面、まだまだ普及率を無視できないInternet Explorer6では、ページの拡大率が変更できないため、800pxを超える横幅のページだと、そのままでは、よく使用されるA4縦サイズの用紙への印刷で、ページの横幅が収まりきらなくなってしまいます。

横幅の広いサイトは、そのままではIE6で印刷
時に右側が断ち切られてしまいます。

CSSソース例

この問題の場合、html要素とbody要素という、ページ全体を構成する要素に対して、zoom(拡大率)を指定することにより、印刷時にページ全体を A4縦サイズに収めるようにすることができます。下のソース例では65%に縮小する設定をしています。縮小率の数字は、そのページのデザインの横幅によって、縮小後の横幅が750px程度になるように決定することになります。

印刷時に拡大(縮小)率を設定し、A4に収める
ためのCSSソース例

IE6での印刷トラブル②-横ナビゲーションが収まらない

IE6の印刷トラブル

画面上では正しく表示される横ナビでも、
印刷では右端の要素が1行に収まらず、2行目に落ちてしまうことがあります。

floatで横並びにしたナビゲーションが、ブラウザの表示では問題なくても、印刷プレビューになると右端の項目が落ちて(消えて)しまうという現象が起こることがあります。 これは印刷時に画面全体の拡大率が変わる事により、ナビゲーション全体の幅が外枠を超えてしまうという、IE6におけるバグの一つです。


この問題の解決法としては、外枠の幅を1~2px余裕をつけて囲む設定にしておくか、デザイン的にそれが難しい場合であれば、「position:absolute;」でナビゲーションを絶対配置することなどが考えられます。

FFでの印刷トラブル-2ページ目以降のフッター配置

FFの印刷トラブル

画面表示では文法を正しく解釈してくれることが多いFirefoxですが、印刷に関しては曲者です。 例えば、よく使用される2段カラムレイアウトのページの印刷で、ページが長く印刷枚数が2枚目になると、ページ最下部のフッターが印刷2枚目の最上部に上がってしまうという現象があります。


この場合、カラムを囲んでいる要素に「display:table;」を指定し、floatされている要素に「display:table-cell;」を指定して、印刷時のみテーブルレイアウトにする方法があります。ただしこの際、「display:table;」はIE6や7に対応していないため JavaScriptを使用してFirefoxのみに適用させる必要があります。


毎日コーディングをしていても、すべてのブラウザの印刷に完全対応するのはとても難しい事です。 また、利用者のことを考えると、画面表示とまったく同じように印刷する方法だけでなく、印刷用レイアウトを作成して必要なコンテンツのみを印刷するなどの方法を検討してみることも大切だと感じています。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム