2021-10-17
BlogManagement, PDF
印刷用のCSSのMediaクエリの設定方法 [レスポンシブデザイン]
問題点
本サイトでは, 当初, 下記のような問題が発生していました
実際の例
iPhone 8, Safari
- モバイル表示 (ハンバーガーメニュー) はiPhoneなのでOK.
- Indexと書かれた右側ハンバーガーメニューの中身が隠しきれずに表示されてしまっている.
iPhone 8, Chrome
- モバイル表示 (ハンバーガーメニュー) はiPhoneなのでOK.
- Indexと書かれた右側ハンバーガーメニューの中身が隠しきれずに表示されてしまっている.
MacBook Air, Chrome
- MacのChromeからpdf化したのにモバイル表示になってしまっている
問題となるポイント
モバイル表示固定
レスポンシブデザインでモバイル・ファーストのCSSを作成する際に, ネットや本でよく書かれている,
@media screen and (min-width:768px) { :}という書き方では, 印刷 (pdf化) 時にモバイル表示になり不便だということがあります.
これは, 某省庁による某支援金サイトでも発生していました. したがって, まともそうな他のサイトでも同様の問題が発生している可能性はあります.
隠しきれないコンテンツ
本サイトのハンバーガーメニューは,
- 中身を表示領域の左側, 右側に隠しておき
- 表示するタイミングでtransleteで表示させたい箇所に横移動させる
という実装になっています.
この「右側に隠す」というのが, screen時とprint時で異なるようで,
screen時には問題ないが,print時には右側に隠れきれておらず, 表示されてしまっている
ということがありました.
結論のコード
本サイトでは, 印刷やpdf化の際の処理として
- 広告はオフにする
screen上と同様の横幅変化によるレスポンシブデザインにする- (ハンバーガーメニューの中身を隠す
の3点を目標に実装しました.
広告オフ
@media print { .ad-class-name { display: none; } : :}
印刷時にはad-class-nameという広告関連のdivクラスを非表示にしました.
@media print {}という中括弧 {} の中の指定が印刷時 (print) に処理されます.
screen上と同様の横幅変化によるレスポンシブデザイン
OK
@media (min-width:768px) { .class-name { : : } : :}
全てのメディアタイプ (all) の省略記述です.
したがって, 画面時 (screen) も, 印刷時 (print) も同じく
- 横幅768px以上の場合に適用
となり, レスポンシブ性を保った実装となります.
NG
NG例 1
@media screen and (min-width:768px) { :}screen画面のみに適用され, 印刷時などには適用されないため, 不適.
NG例 2
@media print, screen and (min-width:768px) { :}印刷時の画面横幅 (用紙サイズA3, A4等) によらず, 印刷時に必ず適用されてしまうため, レスポンシブでないので不適.
@media print, screen and (min-width:768px)の意味は正しい意味 :
- 印刷時には必ず適用
- スクリーン時 且つ 横幅768px以上の場合に適用
の2種類です.
誤った意味 :
- 印刷時 且つ 横幅768px以上の場合に適用
- スクリーン時 且つ 横幅768px以上の場合に適用
ではないのでご注意ください.
ハンバーガーメニューの中身を隠す
右側の隠す処理の部分を
.right_content { right: 0; transform: translateX(+200vw); transform: translateX(+200vw);}とすることで, print時でも確実に隠れるようにしました.
参照
主な参照
その他参照
