オウチーノ開発者ブログスマートフォン用の表示で見るオウチーノ開発者ブログ「株式会社オウチーノ」の社員によるブログです。Web画面を印刷するための基本知識とハック2018-12-08Web画面を印刷するための基本知識とハックどうも。オウチーノの田淵です。この記事はくふうカンパニーアドベントカレンダーの8日目として書いています。サイトを運営する弊社と、結婚式場紹介口コミサイトを運営するみんなのウェディングが経営統合し、共同持株会社「くふうカンパニー」が設立しました。ツール「くらすマッチ」を開発しています。簡単に物件周辺の暮らしに関する情報を調べることができ、住宅を探しているユーザーニーズに合わせて提案できるツールです。Webだけでも完結するサービスなのですが、物件情報と合わせて周辺情報の資料をお客様にお渡ししたいというユーザー(不動産営業)ニーズが高いため以下のような印刷機能を開発しました。印刷のスタイルにはブラウザとは一味違う指定が必要だったので、ここで少しまとめてみます。ブラウザ他にもありますが割愛。指定されるようにします。印刷するページのスタイルには@pageで指定します。今回はA4の縦ページにしました。}@page(MDN)改ページの指定レイアウトされたページごとに印刷したいので指定の位置で改ページするようにします。ページブレイクのCSSプロパティは3種類あるので駆使して理想の位置で改ページさせます。}}page-break-before(MDN)page-break-after(MDN)page-break-inside(MDN)ブラウザ仕様が異なる上述の印刷用のメディアクエリやプロパティを使うことで印刷時にもブラウザと遜色なくレイアウトでき、スタイルも適用することができます。ご想像の通り、ブラウザによって印刷時のスタイルの仕様は異なります。Web画面として表示するときの仕様ともまた異なります。困るのが、印刷時に背景色が表現されないこと。ブラウザによって対応方法が違います。exact;を指定する必要があります。表示したい背景色には!importantも必要です。!important;}IE11背景色を表示するにはユーザーがブラウザの印刷プレビュー上のページ設定で背景の色とイメージを印刷するのチェックボックスをONにしないと表示されません😓EdgeEdgeは背景色が表示されません。Edgeは背景色が表示されません。方法を探し回りましたが、↓↓の回答に行き当たりました。マイクロソフトサポートの公式回答のようです。EdgeでWeb上の画面を印刷すると背景の色や罫線が印刷できません。ように背景を印刷する設定箇所がありません。ご利用頂くようお願いいたします。現在でも設定できそうな箇所は見当たりませんでした😭Firefox背景色を表示するには表示したい背景色に!importantが必要です。背景色をプリントのチェックボックスをONにしないと背景色は表示されません😓Edgeの背景色問題をどうしたか背景色background-colorが表示されないEdgeでもborderや画像は表示されるようです。background-imageを指定してbackground-colorの代替とする手法がWeb検索するとヒットしましたが、カラーごとの画像を用意するのは変更に弱い印象を受けました。当時は開発中のためデザイン的にも容易に変更できるほうが望ましかったのです。レイアウトも単純だったためborder-colorを利用して背景色を表現することにしました。一例としてタイトル行に背景色をつける例。HTMLとCSSはこんな感じ。}}背景色の代わりにborder-bottomの線幅を欲しいサイズに指定しています。その下に用意したタイトルになるテキストをネガティブマージンでborderに重ねてタイトル行の背景色を表現しました。Googleマップからマーカーがはみ出る問題サービスの特性上、周辺情報を表示するためにマップは不可欠です。紙面にもマップが印刷されます。mapを利用しています。スーパーやコンビニ、公園、保育園などの周辺施設の位置をカスタムマーカーで表現しています。地図の縮尺によってはレイアウト内に収まらないマーカーが出てきます。Googleマップではレイアウト外になったマーカーは表示されない動作になります。これがIE11では動きが異なります。レイアウト外になったマーカーがマップ外に表示されてしまいます。印刷時にもマップ外の領域に突然マーカーが表示されている状態になるので困ります。mapはデフォルトで下記のようなマークアップがされています。hiddenを指定してあげることでこの問題は解消できます。hidden;}まとめ今後も細かい調整や各OS、各ブラウザへの対応をブラッシュアップしていきたいと思います。Web画面をPDF化せずに印刷するにはブラウザの印刷機能を使うしかなく、JavaScriptからも制御できない部分が非常に多いです。ページごとのヘッダー・フッター表示などユーザーの印刷設定による部分が大きいので、技術的にできることは少ないがユーザーがストレスなく印刷できるための操作説明などをうまく見せることも必要かと感じました。普段、Web画面と戦っているエンジニア・デザイナーが画面を印刷したいと言われたときに困らないよう、基本的なところをまとめてみました。明日(9日)は@ken1flanさんの「ニャーQL勉強会(エンジニアじゃないひとたちとやったSQL勉強会)」です。Reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。