CSS3 Media Queriesを使った場合に起こる、印刷の落とし穴

こんにちはデザイナーのSUGIYAMAです。

案件でよくレスポンシブデザインのサイト作るのですが、CSS3の「Media Queries」を使用していた時、印刷プレビューすると「違うスタイルが適用されるなぁ...」ということがありました。今回はその原因と、対処方法を備忘録としてブログにしておこうと思います。

---

A4はピクセルにすると「595px × 847px」！

原因ですが、結論から言うと「Media Queries」が用紙サイズに合わせて切り替わっているのです。

<!-- css-->
<link rel="stylesheet" media="(max-width: 767px)" href="sp.css">
<link rel="stylesheet" media="(min-width: 768px)" href="pc.css">

上記のようにレイアウトが切り替わるブレイクポイントを「768px」にした場合、A4サイズで印刷したら縦向きの場合は「sp.css」、横向きの場合は「pc.css」が適用されます。「pc.css」のスタイルを縦向き印刷したくても、用紙サイズのせいで「sp.css」のスタイルが適用されてしまいます。

主な印刷用紙のピクセル値

用紙種類	ピクセル値（72dpi）
A 3	842px / 1191px
A 4	595px / 847px
A 5	420px / 595px
B 3	1032px / 1460px
B 4	729px / 1032px
B 5	516px / 729px

用紙サイズに収まれば問題ないのかもしれませんが、用紙によってスタイルが変わってしまうは、あまりにも使い勝手が悪すぎます。

用紙サイズは関係なく、任意のスタイルが適用する対処方法をいくつか紹介します。

---

方法その①：特定のスタイルだけをプリント用として使用する。

特定スタイルだけをプリント用として適用する場合の方法です。

<!-- css-->
<link rel="stylesheet" media="only screen and (max-width: 767px)" href="sp.css">
<link rel="stylesheet" media="print, screen and (min-width: 768px)" href="pc.css">

上記の場合は「pc.css」のメディアタイプに「print」を追加し、ディスプレイ上とプリント上にも反映するようにしています。「sp.css」にはメディアタイプを「only screen」と指定し、ディスプレイ上しか反映しないように設定しています。
注意として、「print」にもmin-width,max-width の指定しないことです。指定してしまうと、同様の現象が起こるので意味がありません。

---

方法その②：プリント用CSSにすべて記述する。

javascriptでclassを追加し、印刷用CSSファイルにclassを判別して切り替える方法です。

<!-- css-->
<link rel="stylesheet" media="only screen and (max-width: 767px)" href="sp.css">
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="pc.css">
<link rel="stylesheet" media="print" href="print.css">
<!-- js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

まずメディアタイプを「only screen」とmin-width,max-width の指定します。

javascript

$(function () {
$(window).on('load resize',function(){
if ($(window).width()>767) {
$('body').removeClass('sp_layout');
$('body').addClass('pc_layout');
} else {
$('body').addClass('sp_layout');
$('body').removeClass('pc_layout');
}	
});
});	

ブレイクポイントを合わせておき、ブラウザのサイズによって「body」に追加するclassを記述します。

print.css

/*----------------------------------------------------------------------
PC用スタイル　（ブラウザの幅768px以上の場合はこちらが適用されます。）
----------------------------------------------------------------------*/
.pc_layout element{
/* 
}
/*----------------------------------------------------------------------
SP用スタイル　（ブラウザの幅767px以下の場合はこちらが適用されます。）
----------------------------------------------------------------------*/
.sp_layout element{
}

javascriptで指定した、classを先頭に、各スタイルを記述していきます。

この方法の場合、ディスプレイ用とプリント用と2重に記述することになるのでスタイルなどを変更した場合、プリント用も忘れず変更する必要があり結構手間がかかります。
ただし、独自の印刷用スタイルを使用する場合は有効かと思います。

---

方法その③：javascriptで「media」を書き換える

javascriptを使って、メディアタイプを書き換える方法です。

<!-- css-->
<link rel="stylesheet" class="sp_css" media="only screen and (max-width: 767px)" href="sp.css">
<link rel="stylesheet" class="pc_css" media="only screen and (min-width: 768px)" href="pc.css">
<!-- js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

まずメディアタイプを「only screen」とmin-width,max-width の指定します。
そして「media」を書き換えたいlinkにclassを指定します。
上記の場合だと幅が767px以下の場合は「sp_css」、768px以上の場合は「pc_css」を指定しています。
もちろん複数書き換えたいものがある場合も同様のclassを指定します。

javascript

$(function () {
//ブレイクポイントを指定
var breakPoint = 767;
//flg
var flg = '';
$(window).on('load resize',function(){
if ($(window).width()>breakPoint) { //ブレイクポイントより大きい場合
if(flg !== "pc"){ //「flg」が「pc」でない場合
pc_layout();
}
flg = "pc"; 
} else { //ブレイクポイントより小さい場合
if(flg !== "sp"){ //「flg」が「sp」でない場合
sp_layout();
}			
flg = "sp";
}	
});
// pc_layout
var pc_layout = function(){
$("[rel=stylesheet]").each(function(){
if($(this).hasClass("pc_css")){ // 767px以上の場合に指定したclass
$(this).attr("media",$(this).attr("media").replace("print,", "only"));
}else{
$(this).attr("media",$(this).attr("media").replace("only", "print,"));
}
});
}
// sp_layout
var sp_layout = function(){
$("[rel=stylesheet]").each(function(){
if($(this).hasClass("sp_css")){ // 767px以下の場合に指定したclass
$(this).attr("media",$(this).attr("media").replace("print,", "only"));
}else{
$(this).attr("media",$(this).attr("media").replace("only", "print,"));
}
});
}
});

ブレイクポイントを合わせておき、先ほど指定したclassに変更してください。
すると、読み込み時とリサイズ時に「media」を書き換えてくれます。

---

まとめ

意外に厄介な「Media Queries」ですが、レスポンシブデザインを作る際は基本欠かせません。
印刷の仕様もしっかり打ち合わせておくと、トラブルもなくスムーズに作業できると思います。