レスポンシブウェブデザインで印刷（プリント）に対応させるCSSの読み込み指定

レスポンシブ対応でサイト制作をしてる際、お客様からプリントしてもレイアウト崩れていているので何とかならないか？といった要望があったので対応した方法をメモっておきます。

お客様からいただくサイトの修正指示で、一旦プリントしたものに手書きで記入し、PDF化してメールで送ってくることもあります。また、お客様自身が社内で資料として使う場合もありますのでプリントに対応させることも需要としては充分に考えられますので、利便性を考えると対処しておくに越したことはありません。

印刷時に崩れていた原因

実は、私は今までmedia指定をallにしていました。allにしてしまえば全てのデバイスで読み込んでくれるので、特に細かい指定をする必要もありませんでした。昔htmlを習得した際の教材か何かにallにしておけばとりあえず大丈夫みたいな事が書いてあってずっとそうしてた経緯もありますが、レスポンシブに関して言えば、モバイル対応したcssが印刷時に効いてしまっているのでダメだったということです。

↓プリント時に崩れてしまったcssの読み込み指定

<!--PC-->
<link rel="stylesheet" media="all and (min-width: 769px)" href="/common/css/pc.css">
<!--MOBILE-->
<link rel="stylesheet" media="all and (max-width: 768px)" href="/common/css/mobile.css">

レスポンシブウェブデザインではデバイスの幅によって読み込むcssを切り替えています。私の場合良く利用するブレイクポイント（切り替え起点の幅）は769px以上をPC、768px以下をモバイルとしていました。そしてプリントするサイズは一般的にA4サイズが多いと思うのですが、どうやらこのサイズでプリントしようとするとピクセル幅的には768px以下と判断されてモバイル用のcssを読み込んでいるのです。

試しにブレイクポイントを変えて探ってみたら、A４サイズはプリント時の幅を539pxとしているようでした。※私の環境（Windows7 Chrome）になります。

まぁ行ってしまえばモバイル用のcssは効いているのですが、お客様的にはPCレイアウトのものをプリントしようとしているのに、モバイルレイアウトになっているので、崩れていると判断していたと言う事です。

解決手段

今回お客さま的にはPCレイアウトでプリントできれば良いとのことでしたので、プリント時に読み込むcssをPC用のものをそのまま読み込むように設定することで解決させました。

要素内のmedia指定をしっかり指定してあげます。

ブレイクポイントを入れた要素PC/MOBILEのmedia指定をscreenにして印刷時には読み込まないようにしています。印刷時に読み込みたいcssはPCと同じpc.cssを読み込むパスにしていますが、mediaの指定はprintを入れて、印刷時にのみ読み込むようにしました。印刷時は一律PCレイアウトですのでブレイクポイントの指定は不要です。

<!--PC-->
<link rel="stylesheet" media="screen and (min-width: 769px)" href="/common/css/pc.css">
<!--PRINT-->
<link rel="stylesheet" media="print" href="/common/css/pc.css">
<!--MOBILE-->
<link rel="stylesheet" media="screen and (max-width: 768px)" href="/common/css/mobile.css">

ファイルの中で分ける場合（2018/6/18 追記）

上記の方法は、PC用cssとモバイル用cssと印刷用cssとhtmlへ読み込む記述を分けていますが、トップ用や下層用のcssファイルを読み込んでファイルのなかでメディアクエリを使って幅によってスタイルを切り分けているやり方での対処方法です。

PCと印刷用のスタイルが同じであれば下記のようにメディアクエリで指定することもできます。

「screen and (min-width: 769px)」に「, print」を追記して769px以上のスタイルにはscreen（PC）とprint（印刷）が適用されるようになります。

/*******************************************************************/
/* PC：幅769px以上
/*******************************************************************/
@media screen and (min-width: 769px), print {

 /*こちらにPC用のスタイルを記述（印刷時にも適用されます）*/

}

/*******************************************************************/
/* スマホ：幅768px以下                                                                                         */
/*******************************************************************/
@media screen and (max-width: 768px) {

 /*こちらにスマホ用のスタイルを記述*/

}

最後に

今回わざわざこういった対応をすることになった原因は私のmedia指定の認識不足にあります。普段から表示させるデバイスを意識してmediaの指定をしている人にとっては特に問題にならないような事かもしれませんが、解決方法をググっている中で同じように悩んでいる人もいるようでしたので、私なりのやり方になりますが一つの方法として紹介しました。

レスポンシブウェブデザインのやり方など、人によってバラバラですが誰かのお役にたてれば幸いです。

※レスポンシブウェブデザインをレスポンシブに訳したり、プリントや印刷と書いてますが、気分で言い分けてるだけですのであしからず。