こんにちは。サポート部の山本です。
あったかくなってきましたね。
ペーパレス化が進んでいる昨今ですが、それでも稀にWEBサイトをプリントアウトしないといけない時があります。ところが、レスポンシブサイトを印刷してみるとCSSが効いてない状態で印刷されてしまうケースがあります。
今回はそんな時にうまく印刷できるChromeの拡張機能『Awesome Screenshot』を紹介します。
レスポンシブサイトは印刷するとレイアウトが崩れる
例えばhttp://www.aiship.jp/をPC画面で見ると以下です。
ですが、印刷すると、、、下図のように崩れてしまいます。
Awesome Screenshotを使って印刷してみる
まずはコチラにアクセスしてください。以下の赤枠ボタンから追加してください。
下図のようにブラウザの右上にカメラレンズのようなアイコンが表示されます。
以下の手順で印刷してください。
①印刷したいページにアクセスする
②先ほどのアイコンの以下部分をクリックする。
④以下の画面になるので、右上の「DONE」をクリック
⑤以下の赤枠をクリック
⑥キレイに印刷できました。
おわりに
「Awesome Screenshot」はキャプチャーをとった画像に注釈を入れたり、トリミングしたり、加工もできるようになってます。レスポンシブサイトの印刷にお困りの方は、便利なので一度使ってみてはいかがでしょうか。
