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

フレーム（frame）とは

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

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

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

Internet Explorer11（Windows7）の場合

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

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

必要なフレームのみを選択して印刷（１）

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

必要なフレームのみを選択して印刷（２）

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

必要なフレームのみを選択して印刷（３）

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

必要なフレームのみを選択して印刷（４）

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

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%ですべてが収まりました。
  
• 下側の［印刷］ボタンをクリックして印刷します。

Google Chromeの場合

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

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

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

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

Firefoxの場合

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

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

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

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

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

 

背景色なども印刷する

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

Internet Explorer11の場合

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

Google Chromeの場合

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

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

Firefoxの場合

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

 

---