こんにちは！まだまだ残暑が厳しいですね。
私の自宅のパソコンがある部屋は冷暖房設備がなくて、この時期は汗をだらだら流しながら書いています。
扇風機を移動させるのすら億劫なので、暑さと格闘しつつという感じです(*_*)
どうにかしなきゃ！
今回はレスポンシブで作成したWEBサイトを印刷するには、どういったことに注意してどういったやり方をとるのが最適なのかを私なりに検討してみました。
このブログをかくにあたっていろんなサイトを見させていただいたのですが、
まず言えるのは、
1.レスポンシブサイトでWEBを作成するときは、必ず別個でプリント（印刷）用のcssをもうけること
2.body幅を固定して、PCファーストのデザインを充てること（モバイルファーストの場合は手間が大きい）
3.レスポンシブの場合は、印刷に対応する際デザインに制限がでてきてしまうこと
4.印刷に対応したいデザインは@media内にはかかないこと
5.お客様に依頼をうけた場合は、膨大な時間とコストを見積もりに入れること
があげられます。
上記の4に関してですが、対応させたい場合は
@media print, screen and (min-width: 768px) { }
と書けば、対応はできますが、どのみち別個でprint.cssなるものを作成するのが良いと思うので、そっちに直にかきましょう！
背景関連の画像（スライドで背景画像を適応させている場合）は、<img>タグを同じソース内に用意しておいて、スタイルシートで切り替えするのが一番有効だと思います。
ちょっと手間ではありますが…
以下のサイトにはHTML5にも対応した印刷用のおすすめのcssが記載されていました。
サイトに当てはめてみて、合わないサイトもあるかもしれませんが、入れておいていいと思います。
@media print {
section { display: block; page-break-before: always; }
pre code {page-break-after: always;}
@page {
margin-top:0.4cm;
margin: 0.5cm;
}
p a, code, pre {
word-wrap: break-word;
}
img {display:none;}
pre a[href]:after {
content: ""; }
pre abbr[title]:after {
content: ""; }
pre .ir a:after,
pre a[href^="javascript:"]:after,
pre a[href^="#"]:after {
content: ""; }
.no-print {display:none;}
}
Responsive Design.isは文字通り、レスポンシブ デザインについてさまざまな情報を提供するサイトです。英文なので読むのは大変ですが、プリンターもデバイスの一つとして必要だよ！という考え方を持っているようです。
【URL】The printer is a device too!
ただし、5でも書いたように印刷対応は、モダンブラウザに限定しても、各ブラウザで仕様がかなり違うので、突き詰めるならば、かなりコストの高い作業になるということを前提にしておきましょう。
WEB画面と印刷結果で全くの同じ結果を目指すと、WEB画面の方でかなり妥協したレイアウトにせざるを得ない部分があるのでそこはしっかりとクライアントと話しあっておく必要があるでしょう。
あとは表示させるモダンブラウザを固定（クライアントと決定）しておくことも重要なようです。正直、ブラウザごとで仕様が違いすぎて修正修正を繰り返すことになっていまうからです。
できるのであれば、サーバー側でレンダリングするのが早いようですが、私自身知識が少ないので、これに関しては何とも言えません。
あとは、印刷用の縮小・拡大についてはブラウザごとで違うのでCSSのtransformで行えば、ブラウザごとの差異を比較的吸収できるみたいです。
＠media print {
body {
width: 1280px;
transform: scale(0.8);
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform-origin: 0 0;
}
}
正直、いろいろここに書きましたが、私自身ほぼほぼ備忘録としてであんまりまとめられてないですね！
申し訳ないです…
いい方法が見つかりましたら、再度まとめたものをアップします！