WEBMAN

HTML,CSS,JSでハマった事のメモとWEB制作の実験場

公開日:

【Chrome】印刷プレビュー時に起こるレイアウト崩れの対応

【Chrome】印刷プレビュー時に起こるレイアウト崩れの対応

SPONSOR

お疲れ様です、ナガです。

印刷プレビューでレイアウトが崩れるという現象に、いちいち command + p or ctrl + p 押下して確認するのもツラい。
印刷プレビューだと、崩れている個所にどんなスタイルがあたっているかも確認できないのでなおさらツラい。
Chromeの開発者ツールにはエミュレート機能があることを、ナガは本日知りました…。
開発者ツール、できることが多すぎて何ができるのか全然把握できてないマンです。

使い方

  1. 印刷プレビューを確認したいページを開く
  2. 開発者ツールを開く
  3. 開発者ツール右上の縦三点リーダを押下
  4. More tools -> Rendering を押下
  5. Emulate CSS media を print に変更
  6. 以上

画像で流れを確認する

まとめ

これならレイアウト崩れの原因が把握できて、対応方法も見つけやすくなります。
print.css が導入してあるようなサイトだとエミュレート前後がわかりやすいです。
トヨタの車種ページなんかは、ページビューと印刷プレビューの差がハッキリしてるので確認してみてください。
以上です。
トヨタ マークX | トヨタ自動車WEBサイト

SPONSOR

この記事をシェアする

コメント

関連記事