HOME サイトマップ 営業日カレンダー お問い合わせ

フレームで画面が分割されたwebページの印刷


株式会社コニファ・ロゴ




マメ知識・フレームで画面が分割されたwebページの印刷



株式会社コニファ・無料で使えるBtoB WEB受注システム・0万石 WEB受注システム(バナー用3)
無料で使えるBtoB WEB受注システム,0万石受注システム,0円,Free
無料で使えるBtoB WEB受注システム
0万石 WEB受注システム

  • マメ知識・TOPページへ

フレーム(frame)とは

ひとつのwebページのエリアを分割して、それぞれ別のファイルを表示する仕組みです。framesetタグで画面分割を定義するメインのページと分割されたフレームごとに内容を表示する複数のページで構成されます。次の画像は、フレームで分割されたwebページの例です。

フレーム構成の例 フレーム構成の例

フレームで画面が分割されたwebページの印刷(Windows向け)

そのままフレームを使用していないページと同様に印刷を実行すると、ページの最後まで印刷されないなどの問題が生じます(なお、背景色などが印刷されないのは、設定によるものですので、このページの最後に設定の変更方法を記載します)。今回問題検証は、上の画像の右上の例を実際に作って、Windows向けに行いました。
→サンプルページ(別タブまたは別ウィンドウで表示します)

Internet Explorer11(Windows7)の場合

フレームにより最後まで印刷されないケースがあります。

対策:そのフレームのみを選択して印刷します。他のフレームの印刷が不必要な場合も同様です。
(IE11の更新バージョン 11.0.35)

必要なフレームのみを選択して印刷(1)

  • 必要なフレームの任意の余白部分などをクリックします。
  • IE11の上側メニューの[ファイル]から[印刷]を選びます。
  • [印刷]ダイアログで[オプション]タブを選び、「選択されたフレームのみを印刷する」にチェックを入れます。
    印刷ダイアログ
  • [印刷]ボタンをクリックします。

必要なフレームのみを選択して印刷(2)

  • 必要なフレームで右クリックからコンテキストメニューを表示させ、[印刷]を選びます。
  • 後は、(1)と同じです。

必要なフレームのみを選択して印刷(3)

  • 必要なフレームの任意の余白部分などをクリックします。
  • IE11の上側メニューの[ファイル]から[印刷プレビュー]を選びます。
  • [印刷プレビュー]画面の上側のプルダウンメニューから「選択されたフレームのみを印刷する」を選びます。
    印刷プレビュー
  • 印刷プレビューの表示が選択したフレームのみに切り替わります。
  • [印刷プレビュー]画面の左上のプリンタアイコンをクリックして印刷します。

必要なフレームのみを選択して印刷(4)

  • 必要なフレームの任意の余白部分などをクリックした後、IE11の右上の歯車をクリックし、[印刷]から[印刷プレビュー]を選びます。
  • または、必要なフレームで右クリックからコンテキストメニューを表示させ、[印刷プレビュー]を選びます。
  • 後は、(3)と同じです。

Internet Explorer11(Windows10)の場合

Windows7のIE11と同様にフレームにより最後まで印刷されないケースがあります。
そればかりか内容がまったく印刷できないこともあるようです。
ネットで調べると、2017年6月第2週の月例アップデート後から、プリントに関するトラブルが発生しているようです。

元記事:「Internet Explorerの更新プログラムで一部サイトの印刷ができなくなる現象」

筆者のケースでは、前出のWindows7の場合、この更新プログラムをインストールしておらず、またWindows10の場合はインストールしています。この更新プログラムの影響かどうかよく分かりませんが、Internet Explorer11(Windows10)では、Internet Explorer11(Windows7)の場合と違って、印刷プレビューで内容が全く表示されません。当然印刷すると真っ白のまま(ページ数やURL、日付等を除いて)です。

印刷エラーに関する月例ロールアップのプレビュー版パッケージが配信されているようですが・・・

同じ情報元の記事:「KB4022168とKB4022720 月例ロールアップのプレビューが公開されています」

Windows7向けとWindows8.1向けに、前記のプリントに関する不具合の修正が含まれているようです。ただし、Windows10用には何も配信されていません。情報元の筆者さんの場合、現在ではWindows10のエラーも解消しているが、何故か理由はわからないとのことです。

残念ながら、私のWindows10のIE11の不具合(印刷プレビューで内容が全く表示されない)は現在(2017年7月6日)も解消されていません。同様に2017年6月第2週の月例アップデート後から、プリントの不具合をかかえてしまった場合は、修正される更新プログラムを待つしか無いと思われます。その間は他のブラウザを使うことになりますが、フレームの印刷に関しては、後述するFirefoxをお勧めします。
(IE11の更新バージョン 11.0.43)

※追記;本日(2017年7月12日)前記のWindows10にて月例アップデート更新プログラムのインストール後に試したところ、IE11の不具合が直っていました(不具合の後、この更新まで一度もプリントをしていなかったので、この更新によるものかは分かりません)。

Microsoft Edgeの場合

フレームにより最後まで印刷されないケースがあります。また、Internet Explorer11(Windows7)のようにフレームのみを選択して印刷することができません。

対策:フレームによっては縮小して全体を印刷することが可能ですが、使用に耐えるかはケースバイケースです。すべて印刷できたとしても文字サイズはとても小さくなります。

今回のサンプルはなんとか印刷できました

  • Edgeの画面右上の三点リーダのようなアイコンをクリックして、[印刷]を選択します。
  • 印刷のプレビューも含めた設定画面になるので、すべてが入ることを確認しながら[拡大/縮小]のプルダウンメニューにて縮小サイズを決定しますす(細かく設定はできないようです)。今回のサンプルの場合は50%ですべてが収まりました。
    印刷プレビュー2
  • 下側の[印刷]ボタンをクリックして印刷します。

Google Chromeの場合

フレームにより最後まで印刷されないケースがあります

対策:フレームを選び、フレーム内のすべてを選択して印刷。

フレーム内のすべてを選択して印刷

  • 必要なフレームの任意の余白部分などをクリックします。
  • ショートカットの[Ctrl]+[A]を押して、フレーム内のすべてを選択します。
  • 選択したままの状態で、画面右上の[設定]ボタン(縦の三点リーダのようなアイコン)をクリックして[印刷]を選ぶか、画面右クリックのコンテキストメニューから[印刷]を選びます。ショートカットの[Ctrl]+[P]でもかまいません。
  • プレビューを確認します。次の画像はスクロールして2ページにわたってすべてが収まっていることを確認しています。
    印刷プレビュー3
  • 上側の[印刷]ボタンをクリックして印刷します。

Firefoxの場合

Firefoxには現在もフレームに特化した機能が残っています。

特定のフレームだけを印刷

  • 印刷したいフレーム内で右クリックからコンテキストメニューを表示させ、[このフレーム]を選び、さらにその子のメニューから[フレームを印刷]を選びます。
    Firefox コンテキストメニュー
  • 印刷ダイアログからページ指定、部数等を確認し、[OK]ボタンをクリックします。
    Firefox プリントダイアログ
  • 印刷が開始されます。

使用に耐えるかはケースバイケースで、ページ全体を印刷

  • 画面右上のメニューボタン(ハンバーガーアイコン型)をクリックし、[印刷]を選びます。
    Firefox プリントプレビュー
  • 印刷プレビュー画面で、すべてが入ることを確認しながら[拡大/縮小]のプルダウンメニューにて縮小サイズを決定します(10%きざみで変更できます)。今回のサンプルの場合は60%ですべてが収まりました。
  • 左上の[印刷]ボタンをクリックして印刷します。

 

背景色なども印刷する

webページを印刷する場合、初期設定ではモノクロのテキストだけになっています。背景、画像、ボタンなどの色を含めて印刷するときは、[ページ設定]などで指定しておく必要があります。ただし、すべてディスプレイで見ているとおりには印刷できません。元々色自体もディスプレイ上のRGBをプリントのCMYKでは再現できませんし、ブラウザごとの制約、webページ制作側のCSSのプリント指定などでも変わってしまいます。あくまでもそれらしく色が付く程度です。

Internet Explorer11の場合

  • メニューの[ファイル]から[ページ設定]を選ぶ、または、画面右上のツールボタン(ギア型アイコン)から[ページ設定]を選びます。
  • ページ設定の画面で、[背景の色とイメージを印刷する]にチェックを入れます。
  • [OK]ボタンをクリックします。

Google Chromeの場合

Google Chromeの場合、印刷の初期設定で[カラー]になっていて画像やボタンなどは、色付きで印刷されるようです。ただし、背景は無しになっているので、背景色や背景画像も含めて印刷する場合は次のようにします。

  • 画面右上の[設定]ボタンをクリックして[印刷]を選ぶか、画面右クリックのコンテキストメニューから[印刷]を選びます。ショートカットの[Ctrl]+[P]でもかまいません。
  • 印刷画面の左側の[+ 詳細設定]をクリックして、オプションを表示します。
  • オプションの[背景のグラフィック]にチェック入れます。背景のグラフィックがプレビューに反映されます。
  • [印刷]ボタンをクリックします。

Firefoxの場合

  • 画面右上のメニューボタン(ハンバーガーアイコン型)をクリックし、[印刷]を選びます
  • 印刷画面の左上、左から2番めの[ページ設定]をクリックします。
  • ページ設定の画面で、オプションの[背景と背景画像も印刷]にチェックを入れます。
  • [OK]ボタンをクリックします。

 


 


株式会社コニファ:ミニbanner画像include用-1(フルパス)

株式会社コニファのSaaS、ASP

  • ハンディターミナルを活用したシステム開発
  • SATOラベルプリンタ用システム開発
  • 耐洗ラベルプリントシステム開発
  • 定期配達・回収品管理システム
  • 無料で使える,0万石在庫照会システム,0円,Free
  • BtoB WEB受注システム
  • 0万石 WEB受注システム
  • 購買システム,既存のホストを利用するEDI連動型・百万石 購買システム,小口の仕入先,電子化,納期情報,コメント
  • 「BtoB WEB受注システム」PKI認証対応版
  • 「BtoB WEB受注システム」スマートフォン・iPad対応版


 

コニファHOME | サイトマップ | 会社案内 | お問い合わせ

Copyright© 2019 Conifer,Inc. All rights reserved.